L'événement Button onClick a été déclenché trop de fois dans une boîte de dialogue jQuery Mobile

J'utilise jQuery Mobile 1.1.1 et j'utilise Dialogs. J'utilise la boîte de dialogue pour choisir l'élément à ajouter à un <ul>. J'ai googlé et chercher un problème similaire sur SO, mais pas de chance jusqu'à présent.L'événement Button onClick a été déclenché trop de fois dans une boîte de dialogue jQuery Mobile

Pour ajouter plusieurs éléments au <ul>, j'ai besoin d'ouvrir mon dialogue plusieurs fois et j'essaie d'éviter d'avoir à recréer la boîte de dialogue chaque fois que je l'ouvre. Mon problème est que mon onClick événement de mon bouton OkButtonPopup déclenche trop de fois (la première fois, il se déclenche une fois, la deuxième fois, il se déclenche deux fois, la troisième fois il se déclenche 3 fois et ainsi de suite ...).

Je ne comprends pas pourquoi ce qui se passe ...

est sous le code (simplifié) qui me donne du mal.

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

Toute aide serait très apprécié :)

Source

2012-07-26 AntonyG

Chaque fois que vous appelez addPopUp, vous continuer à attacher l'événement click à OkButtonPopup, par conséquent, le gestionnaire d'événements est appelé deux ou trois fois. Vous pouvez essayer de lier l'événement via bind et de le dissocier avant de le lier. Vous pouvez le faire de cette façon:

$('#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()); 
       } 
      });

Ou vous pouvez également joindre l'événement, cliquez sur pageshow au lieu de le faire dans addPopUp. De cette façon, vous liez une seule fois.

Source

2012-07-26 16:17:03

C'est génial, les deux solutions fonctionnent. Merci! – AntonyG

aide vraiment ... merci –

L'événement Button onClick a été déclenché trop de fois dans une boîte de dialogue jQuery Mobile

Répondre

Questions connexes