title: Click events being appended on each click
body: <p>I have a form with multiple rows and each row has a delete button with a link.  I want to progressively enhance the links to add a bootstrap modal to these buttons.  So what I'm doing is:</p>
  
  <ol>
  <li>Grab all the delete button elements on the page.</li>
  <li>Loop through each button.</li>
  <li>For each button and change some attributes on the modal based on what button is clicked, including the url that is called when "OK" is cicked.</li>
  </ol>
  
  <p>Everything is working like I want, except that each time the modal is triggered and the "OK" button is clicked the url attached to that gets appended to the previous one.</p>
  
  <p><a href="http://jsfiddle.net/bittersweetryan/9TpX8/" rel="nofollow">http://jsfiddle.net/bittersweetryan/9TpX8/</a>  (click the remove button then OK more than once, have your console open)</p>
  
  <p>Here's the code</p>
  
  <pre><code>//anonymous function to grab all delete buttons and turn into a modal
  (function(){
      var delBtn = $(".delete"),
          $modal = $("#modal-delete");
  
      if(!$modal.size()){
          $modal = $('&lt;div id="modal-delete" class="modal hide fade"&gt;&lt;div class="modal-header"&gt; &lt;a href="#" class="close"&gt;&amp;times;&lt;/a&gt;&lt;h3&gt;Confirm Delete&lt;/h3&gt;&lt;/div&gt;&lt;div class="modal-body" id="modal-content"&gt;&lt;/div&gt;&lt;div class="modal-footer"&gt; &lt;a href="#" id="okButton" class="btn danger"&gt;OK&lt;/a&gt; &lt;a href="#" id="cancelButton" class="btn secondary"&gt;Cancel&lt;/a&gt; &lt;/div&gt;&lt;/div&gt;').appendTo("body");
      }
  
      delBtn.each(function(){
          var $button = $(this),
              clickHandler,
              href= $button.attr("href");
  
          if(href){
              clickHandler = function(){
                  console.log(href);
                  //return window.location=href;
              };
          }
          else{
              clickHandler = $button.click;
          }
  
          $button.attr("data-toggle","modal").
                  attr("data-target","#modal-delete");
  
          $button.on("click",function(){
              $modal.find("#okButton").on("click",function(){
                  clickHandler();
                  $modal.modal('hide');
              }).
              end().
              find("#cancelButton").on("click",function(){
  
                  $modal.modal('hide');
              }).
              end().
              find("#modal-content").html($button.attr("title"));
          });
      });
  
  })();
  </code></pre>