title: Bootstrap 3.3.2 Modal events fire multiple times
body: <p><a href="http://getbootstrap.com/javascript/#modals-events">Bootstrap Modal Events</a> fire multiple times, or rather always one more time then before. I wrap the modal events in a click function that returns the modal id for now.</p>
  
  <p>How can I make sure the event always only fires once, and only when the click function invoked it?</p>
  
  <p>jQuery</p>
  
  <pre><code>$('.img-modal').on('click', function () {
  
  // returns #modal-Id
  var modalIdClicked = $(this).attr('data-target')
  console.log ('modal id clicked from .img-modal = '+ modalIdClicked);
  
  console.log ('.img-modal clicked');
  
      $(modalIdClicked).on('show.bs.modal', function(event) {
  
          console.log ( 'show.bs.modal');
  
      });    
  
  });
  </code></pre>
  
  <p>Default Bootstrap 3.3.2 Modal HTML</p>
  
  <pre><code>&lt;div class="col-md-7"&gt;
      &lt;img class="img-modal img-responsive cursor-pointer" data-toggle="modal" data-target="#modal-1" src="www" alt="image"&gt;
  &lt;/div&gt;
  
  &lt;!--  Modal --&gt;
  &lt;div class="modal fade top-space-0" id="modal-1" tabindex="-1" role="dialog"&gt;
      &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content cursor-pointer" data-toggle="modal" data-target="#modal-1"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="#modal-1"&gt;CLOSE &amp;times;&lt;/button&gt;
                  &lt;h1 class="modal-title"&gt;Modal Title&lt;/h1&gt;
              &lt;/div&gt;
  
              &lt;div class="modal-body"&gt;
                  &lt;div class="img-center"&gt;
                      &lt;img class="img-modal img-responsive" src="wwww" alt="image"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="modal-footer"&gt;
                  &lt;a href="#" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--  Modal end --&gt;
  </code></pre>
  
  <p>I did have a look at <a href="https://stackoverflow.com/questions/14969960/jquery-click-events-firing-multiple-times">jQuery click events firing multiple times</a> and
  <a href="https://stackoverflow.com/questions/22966870/bootstrap-3-remotely-loaded-modal-creates-duplicate-javascript-events">Bootstrap 3 - Remotely loaded modal creates duplicate javascript events</a> and it seems this can be achieved with the <code>.off</code> method.</p>
  
  <p>So using <code>$(modalIdClicked).off().on('show.bs.modal', function(event) {</code> did the trick in this case.</p>
  
  <p>Can someone please explain to me <strong>why</strong> this <code>.off</code> method is needed in this case exactly? I am having <strong>trouble understanding how the click is passed around</strong>.</p>
  
  <p>Does the click reach the Bootstrap JS one more time with every click? Why does it fire the events multiple times without the <code>.off</code> method?</p>
  
  <p>Thank you.</p>
  
  <p>(I am trying to learn jQuery from a book, if any one out there really has a <strong>good</strong> book or even <strong>the one and only</strong> book to read about this, then please do shoot me a note, there is so many out there and all claim to be the best naturally.. thank you.)</p>