Button onClick事件在jQuery Mobile对话框中触发了太多次

我正在使用jQuery Mobile 1.1.1并使用Dialogs。我使用对话框来选择要添加到<ul>的元素。我搜索了搜索类似的问题，但迄今为止没有运气。Button onClick事件在jQuery Mobile对话框中触发了太多次

要将多个元素添加到<ul>我需要多次打开我的对话框，并且我试图避免每次打开时都需要重新创建对话框。我的问题是，我的OkButtonPopup按钮的onClick事件触发次数过多（第一次触发一次，第二次触发两次，第三次触发三次，等等......）。

我不明白为什么会这样......

下面是（简化）代码，让我的麻烦。

<!doctype html> 
<html> 

<head> 
    <title>Problem with Dialog re-use</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 
</head> 

<body> 
    <div data-role="page"> 
     <div data-role="header"> 
      <h1>Problem with Dialog re-use</h1> 
     </div> 
     <div data-role="content"> 
      <p><h2>Activated by</h2></p> 
      <ul id="activate_ul"> 
       <!-- li to be added dynamically--> 
      </ul> 
      <a href="javascript:addPopup()" data-rel="popup" data-role="button">Add</a>  
     </div> 
    </div>  
    <div id="myDialog" data-role="dialog">  
     <div data-role="header" data-theme="d"> 
      <h1>My Elements</h1> 
     </div>  
     <div id="myDialogContent" data-role="content" data-theme="c"> 
      <p>Element Type</p> 
      <select id="element-type"> 
       <!-- options to be added dynamically--> 
      </select> 
      <p>Element Name</p> 
      <select id="element-list"> 
       <!-- options to be added dynamically--> 
      </select> 
      <a href="#" id="OkButtonPopup" data-role="button" data-rel="back" data-theme="b">Ok</a> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     var all_inputs = ["myInput1","myInput2","myInput3","myInput4"]; 
     var all_outputs = ["myOutput1","myOutput2","myOutput3","myOutput4"]; 
     var all_zones = ["myZone1","myZone2","myZone3","myZone4"]; 

     function updateInputList() { 
      $('#element-list').empty();   
      for (var i = 0; i < all_inputs.length; i++) { 
       $('#element-list').append('<option value="'+all_inputs[i]+'">'+all_inputs[i]+'</option>'); 
      } 
     } 

     function updateOutputList() { 
      $('#element-list').empty(); 
      for (var i = 0; i < all_outputs.length; i++) { 
       $('#element-list').append('<option value="'+all_outputs[i]+'">'+all_outputs[i]+'</option>'); 
      } 
     } 

     function updateZoneList() { 
      $('#element-list').empty(); 
      for (var i = 0; i < all_zones.length; i++) { 
       $('#element-list').append('<option value="'+all_zones[i]+'">'+all_zones[i]+'</option>'); 
      } 
     } 

     function removeByValue(arr, val) { 
      for(var i=0; i<arr.length; i++) { 
       if(arr[i] == val) { 
        arr.splice(i, 1); 
        break; 
       } 
      } 
     } 

     function addPopup() { 
      $('#element-type').empty(); 
      $('#element-type').append('<option value="Input">Input</option>') 
          .append('<option value="Output">Ouput</option>') 
          .append('<option value="Zone">Zone</option>');  

      updateInputList(); 

      $('#element-type').change();   

      $('#element-type').on("change", function() { 
       if ($("option:selected", this).attr('value') == "Input") { 
        updateInputList(); 
       } 
       if ($("option:selected", this).attr('value') == "Output") { 
        updateOutputList(); 
       } 
       if ($("option:selected", this).attr('value') == "Zone") { 
        updateZoneList(); 
       } 

       $('#element-list').selectmenu('refresh'); 
      }); 

      // Event triggered too many times!! Why??? 
      $('#OkButtonPopup').on("click", function() { 
       $('#activate_ul').append('<li>' + $('#element-list').val() +'</li>'); 

       // remove element from corresponding array 
       if ($('#element-type').val() == 'Input') { 
        removeByValue(all_inputs, $('#element-list').val()); 
       } 
       if ($('#element-type').val() == 'Output') { 
        removeByValue(all_outputs, $('#element-list').val()); 
       } 
       if ($('#element-type').val() == 'Zone') { 
        removeByValue(all_zones, $('#element-list').val()); 
       } 
      }); 

      $.mobile.changePage("#myDialog", { role: "dialog" }); 
     } 
    </script> 
</body> 
</html>

任何帮助，将不胜感激:)

来源

2012-07-26 AntonyG

每次你打电话addPopup，你继续安装点击事件OkButtonPopup，因此，事件处理程序被调用了几次。您可以尝试通过绑定附加事件，并在绑定之前解除绑定。你可以这样做：

$('#OkButtonPopup').unbind("click").bind("click", function() { 
       $('#activate_ul').append('<li>' + $('#element-list').val() +'</li>'); 

       // remove element from corresponding array 
       if ($('#element-type').val() == 'Input') { 
        removeByValue(all_inputs, $('#element-list').val()); 
       } 
       if ($('#element-type').val() == 'Output') { 
        removeByValue(all_outputs, $('#element-list').val()); 
       } 
       if ($('#element-type').val() == 'Zone') { 
        removeByValue(all_zones, $('#element-list').val()); 
       } 
      });

或者你也可以在pageshow上附加click事件，而不是在addPopup中做。这样你只能绑定一次。

来源

2012-07-26 16:17:03

这很棒，两种解决方案都能正常工作。谢谢！ – AntonyG 2012-07-26 16:40:56

真的有帮助...谢谢 – 2012-12-07 11:58:27

Button onClick事件在jQuery Mobile对话框中触发了太多次

回答

相关问题