按钮onClick事件在jQuery Mobile Dialog中触发了太多次

我正在使用jQuery Mobile 1.1.1并使用Dialogs 。 我正在使用该对话框选择要添加到

元素。 我用谷歌搜索并搜索类似的问题，但到目前为止没有运气。

要向

添加多个元素，我需要多次打开我的对话框，并且我试图避免每次打开它时都必须重新创建对话框。 我的问题是我的OkButtonPopup按钮的onClick事件触发了太多次（第一次，它触发一次，第二次，它触发两次，第三次触发3次，依此类推……）。

我不明白为什么会发生这种情况……

下面是给我带来麻烦的（简化）代码。

           
 
 
Problem with Dialog re-use
 
 
 
Activated by
 
  
 Add 
 
 
 
 
My Elements
 
 
 
Element Type
    
Element Name
    Ok 
 
  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(''+all_inputs[i]+''); } } function updateOutputList() { $('#element-list').empty(); for (var i = 0; i < all_outputs.length; i++ ) { $('#element-list').append(''+all_outputs[i]+''); } } function updateZoneList() { $('#element-list').empty(); for (var i = 0; i < all_zones.length; i++ ) { $('#element-list').append(''+all_zones[i]+''); } } 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('Input') .append('Ouput') .append('Zone'); 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('
' + $('#element-list').val() +'
'); // 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" }); }    

任何帮助将非常感激 ：）

Answer 1

每次调用addPopup时，都会继续将click事件附加到OkButtonPopup，因此，事件处理程序会被调用几次。 您可以尝试通过绑定附加事件并在绑定之前解除绑定。 你可以这样做：

 $('#OkButtonPopup').unbind("click").bind("click", function() { $('#activate_ul').append('
' + $('#element-list').val() +'
'); // 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中执行。 这样你只绑定一次。