title: Button onClick event triggered too many times in a jQuery Mobile Dialog
body: <p>I'm using jQuery Mobile 1.1.1 and am using <a href="http://jquerymobile.com/demos/1.1.1/docs/pages/page-dialogs.html" rel="nofollow">Dialogs</a>. I'm using the dialog to choose which element to add to a <code>&lt;ul&gt;</code>. I've googled and search for similar issue on SO but no luck so far.</p>
  
  <p>To add multiple elements to the <code>&lt;ul&gt;</code>I need to open my dialog multiple times and I'm trying to avoid having to re-create the dialog each time I open it. My problem is that my <code>onClick</code> event of my <code>OkButtonPopup</code> button triggers too many times (the first time, it triggers once, the second time, it triggers twice, the third time it triggers 3 times and so on...). </p>
  
  <p>I don't get why this is happening...</p>
  
  <p>Below is the (simplified) code that gives me trouble.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Problem with Dialog re-use&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div data-role="page"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;Problem with Dialog re-use&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div data-role="content"&gt;
              &lt;p&gt;&lt;h2&gt;Activated by&lt;/h2&gt;&lt;/p&gt;
              &lt;ul id="activate_ul"&gt;
                  &lt;!-- li to be added dynamically--&gt;
              &lt;/ul&gt;
              &lt;a href="javascript:addPopup()" data-rel="popup" data-role="button"&gt;Add&lt;/a&gt;    
          &lt;/div&gt;
      &lt;/div&gt;    
      &lt;div id="myDialog" data-role="dialog"&gt;    
          &lt;div data-role="header" data-theme="d"&gt;
              &lt;h1&gt;My Elements&lt;/h1&gt;
          &lt;/div&gt;    
          &lt;div id="myDialogContent" data-role="content" data-theme="c"&gt;
              &lt;p&gt;Element Type&lt;/p&gt;
              &lt;select id="element-type"&gt;
                  &lt;!-- options to be added dynamically--&gt;
              &lt;/select&gt;
              &lt;p&gt;Element Name&lt;/p&gt;
              &lt;select id="element-list"&gt;
                  &lt;!-- options to be added dynamically--&gt;
              &lt;/select&gt;
              &lt;a href="#" id="OkButtonPopup" data-role="button" data-rel="back" data-theme="b"&gt;Ok&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
          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 &lt; all_inputs.length; i++ ) {
                  $('#element-list').append('&lt;option value="'+all_inputs[i]+'"&gt;'+all_inputs[i]+'&lt;/option&gt;');
              }
          }
  
          function updateOutputList() {
              $('#element-list').empty();
              for (var i = 0; i &lt; all_outputs.length; i++ ) {
                  $('#element-list').append('&lt;option value="'+all_outputs[i]+'"&gt;'+all_outputs[i]+'&lt;/option&gt;');
              }
          }
  
          function updateZoneList() {
              $('#element-list').empty();
              for (var i = 0; i &lt; all_zones.length; i++ ) {
                  $('#element-list').append('&lt;option value="'+all_zones[i]+'"&gt;'+all_zones[i]+'&lt;/option&gt;');
              }
          }
  
          function removeByValue(arr, val) {
              for(var i=0; i&lt;arr.length; i++) {
                  if(arr[i] == val) {
                      arr.splice(i, 1);
                      break;
                  }
              }
          }
  
          function addPopup() {
              $('#element-type').empty();
              $('#element-type').append('&lt;option value="Input"&gt;Input&lt;/option&gt;')
                              .append('&lt;option value="Output"&gt;Ouput&lt;/option&gt;')
                              .append('&lt;option value="Zone"&gt;Zone&lt;/option&gt;');    
  
              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('&lt;li&gt;' + $('#element-list').val() +'&lt;/li&gt;');
  
                  // 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" });
          }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help would be much appreciated :)</p>