title: How can I call a function when a Bootstrap modal is open?
body: <p>I use Boostrap 3.7 and Blade (Laravel 5.5).</p>
  
  <p>I'm trying to display <code>console.log('works')</code> when my boostrap modal opens but it didn't work.</p>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>@foreach(...)
  
      ...
  
      &lt;div class="modal fade" id="reservationModal" tabindex="-1" role="dialog" aria-labelledby="reservationModal" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              ...
          &lt;/div&gt;
      &lt;/div&gt;
  @endforeach
  </code></pre>
  
  <p><strong>JS :</strong></p>
  
  <pre><code>$('#reservationModal').on('shown.bs.modal', function (e) {
      console.log('works');
  });
  </code></pre>
  
  <p>I followed this doc : <a href="https://getbootstrap.com/docs/3.3/javascript/#modals" rel="noreferrer">https://getbootstrap.com/docs/3.3/javascript/#modals</a></p>
  
  <p>And I already read that : <a href="https://stackoverflow.com/questions/17461682/calling-a-function-on-bootstrap-modal-open">Calling a function on bootstrap modal open</a></p>
  
  <p>Thank's for help !</p>
  
  <p><strong>EDIT 1:</strong></p>
  
  <p>I solved the problem with this code : </p>
  
  <pre><code>$(document).on('show.bs.modal', '#reservationModal', function (e) {
      console.log('works');
  });
  </code></pre>
  
  <p>But how to differenciate modals (because they are into <code>foreach</code> loop)?</p>
  
  <p>Something like :</p>
  
  <pre><code>$(document).on('show.bs.modal', '#reservationModal-specificId', function (e) {
      console.log('works');
  });
  </code></pre>