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對話框中觸發了太多次

回答

相關問題