jQuery Mobile에서 button onClick 이벤트가 너무 많이 트리거 됨

jQuery Mobile 1.1.1을 사용 중이며 Dialogs을 사용 중입니다. 대화 상자를 사용하여 <ul>에 추가 할 요소를 선택합니다. 난 봤어 비슷한 문제에 대한 그래서 지금까지 행운을 검색했습니다.jQuery Mobile에서 button onClick 이벤트가 너무 많이 트리거 됨

<ul>에 여러 요소를 추가하려면 여러 번 열어야하고 열 때마다 대화 상자를 다시 만들지 않아야합니다. 내 onClick 이벤트 내 OkButtonPopup 단추가 너무 많은 시간을 트리거합니다 (처음으로, 한 번, 두 번째 트리거, 두 번 트리거하는 세 번 트리거하는 3 번 등등 ...). 이런 일이 왜하지 않는

... 아래

나에게 문제를 제공하는 (간체) 코드입니다.

<!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>

이 어떤 도움이 많이 주시면 감사하겠습니다 :) 당신이 addPopup 전화

출처

2012-07-26 AntonyG

매번, 당신은 OkButtonPopup에 클릭 이벤트를 부착 계속, 따라서, 이벤트 핸들러는 몇 번 호출됩니다. 바인드를 통해 이벤트를 첨부하고 바인드하기 전에 언 바인드를 시도 할 수 있습니다. 다음과 같이 할 수 있습니다.

또는 addPopup에서 수행하는 대신 클릭 이벤트를 첨부 할 수도 있습니다. 그렇게하면 단 한 번만 바인딩 할 수 있습니다.

출처

2012-07-26 16:17:03

두 솔루션 모두 잘 작동합니다. 감사! – AntonyG

realy help ... 감사합니다. –

jQuery Mobile에서 button onClick 이벤트가 너무 많이 트리거 됨

답변

관련 문제