title: Bootstrap 3 Modal Event (Hidden.Bs.Modal) Keeps Repeating
body: <p>I have 6 images that load in different 6 different modal windows and they each have a next button and also a close button in them. The next button works with the following jquery code: </p>
  
  <pre><code>    $('#nextModal12').click(function() {
          $('#featuresModal1').modal('hide');
          $('#featuresModal1').on('hidden.bs.modal', function () {
              $('#featuresModal2').modal('show');
              document.getElementById('#featuresModal1').style.display="none";
          });
      });
  
      $('#nextModal23').click(function() {
          $('#featuresModal2').modal('hide');     
          $('#featuresModal2').on('hidden.bs.modal', function () {
              $('#featuresModal3').modal('show');
              document.getElementById('#featuresModal2').style.display="none";                            
          });
      });     
  </code></pre>
  
  <p>However, the problem is: Even when I <strong>close</strong>/<strong>hide</strong> the first modal ('#nextModal12') by clicking the CLOSE button instead of the next, the second modal appears. </p>
  
  <p>I believe this is because the hidden.bs.modal function is picked up and called again even when I'm not clicking the next button. <strong>How do I prevent the script from picking up the hidden.bs.modal function indiscriminately?</strong></p>