title: Twitter Bootstrap Modal Multiple event firing
body: <p>This is a odd issue and i have searched for an answer but i could not find one that suited my code.</p>
  
  <p><strong>EDIT</strong>: This issue happens on a heavy Ajax page, where the page is not refreshed and the Modal are being reused.</p>
  
  <p>Please note my Javascript is a little weak so i am probably approaching this issue wrong</p>
  
  <p>I have found similar issues <a href="https://groups.google.com/forum/?fromgroups=#!topic/twitter-bootstrap/kU2WOGqtr1c">here</a> and <a href="https://groups.google.com/forum/?fromgroups=#!topic/twitter-bootstrap/TANDpeyEXrs">here</a></p>
  
  <p>Both describe the issue i am having but i just update the calling view on hidden. i don't bind to a button event.</p>
  
  <p>I have multiple Modals defined</p>
  
  <pre><code>    &lt;div id="modal_small" class="modal hide fade in"&gt;
      &lt;/div&gt;
      &lt;div id="modal_large" class="modal hide fade in"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I reuse these modals. So the modal_large is displaying a Create Form one second and next its showing a list of images you can select from.</p>
  
  <p>I render my modals using the following script passing in the view to be shown in each instance</p>
  
  <pre><code>        function show_modal_large(href) {
              $.get(href, function (data) {
                  $('#modal_large').html(data);
                  $('#modal_large').modal('show');
              });
          };
  </code></pre>
  
  <p>My Goal here is to reuse these modals. and this is where the problem lies i believe</p>
  
  <p>In the "$(document).ready" of the view which is going to display the modal i call this script to bind to the modals 'hidden' event</p>
  
  <pre><code>    $('#modal_large').on('hidden', function () {
                 // Make Ajax Call - THIS WORKS
      });
  </code></pre>
  
  <p>So imaging you have a list on a view showing your selected images. you then open up a modal and select more images. On Hidden i Update the the selected images on the calling form.</p>
  
  <p>Every thing works fine. </p>
  
  <p><strong>The Issue:</strong></p>
  
  <p>The first time i open the modal and close it the 'on hidden' event is fired once. the second time i open and close the modal the 'on hidden' event is call twice, third time three calls and so on. 
  If i go off and use the modal for something else with a different 'hidden' event the hidden event is call <strong>four</strong> times for the NEW hidden event, and <strong>Four</strong> times for the old hidden event. After a short while my system just dies with all the ajax calls. </p>
  
  <p>Am i missing something? How should i structure my Code so this does not happen?</p>