title: AJAX call not triggered on show.bs.modal
body: <p>I have a button which is supposed to trigger a modal with a contact form. Part of the <code>show.bs.modal</code> function is an AJAX call to my DB to get some file details which are then meant to be shown in the modal-body.</p>
  <p>The problem is that the modal does indeed open, but with no <code>modal-body</code> content, which means that the JavaScript code to trigger to the AJAX call is not working. I do not see any network activity in the browser debug menu, no call to the PHP file, and even an <code>alert</code> on top of the JS code telling me that that a button was pressed is not triggered. It seems like the whole JS code is circumvented, yet the modal still shows.</p>
  <p>The same code works in another project, anyone has any idea as to why this is happening?</p>
  <p>Button:</p>
  <pre><code>&lt;div class=&quot;card-footer bg-light text-center&quot;&gt;
      &lt;button id=&quot;modal_btn&quot; name=&quot;modal_btn&quot; type=&quot;button&quot; class=&quot;btn bg-teal-400&quot; data-toggle=&quot;modal&quot; data-target=&quot;#modal_contact_form&quot; data-imgid=&quot;'.$row['image_id'].'&quot; data-keyboard=&quot;true&quot;&gt;
          &lt;span class=&quot;icon-ico-mail4&quot;&gt;&lt;/span&gt;  Anfragen
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Modal:</p>
  <pre><code>&lt;!-- Contact form modal --&gt;
  &lt;div id=&quot;modal_contact_form&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header bg-teal-300&quot;&gt;
                  &lt;h3 class=&quot;modal-title&quot;&gt;Kaufanfrage - Artikel #1234&lt;/h3&gt;
                  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&amp;times;&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
  
              &lt;/div&gt;
  
              &lt;div class=&quot;modal-footer&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-link&quot; data-dismiss=&quot;modal&quot;&gt;Abbrechen&lt;/button&gt;
                  &lt;button type=&quot;submit&quot; class=&quot;btn bg-teal-300&quot;&gt;Nachricht Senden&lt;/button&gt;
              &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /contact form modal --&gt;
  </code></pre>
  <p>JavaScript:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt; 
  
      // DISPLAY EDIT RECORD MODAL
      $('#modal_contact_form').on('show.bs.modal', function (event) {
              //var button = $(event.relatedTarget)   // Button that triggered the modal
              window.alert(&quot;button clicked.&quot;);
              var imgid = $(event.relatedTarget).data('imgid')    // Extract info from data-* attributes
              var modal = $(this);
              var dataString = 'action=contact&amp;imgid=' + imgid;
  
              $.ajax({
                  type: &quot;POST&quot;,
                  url: &quot;./assets/ajax/ajax_action.php&quot;,
                  data: dataString,
                  cache: false,
                  success: function (data) {
                      console.log(data);
                      modal.find('.modal-body').html(data);
                  },
                  error: function(err) {
                      console.log(err);
                  }
              });  
      });
      
  &lt;/script&gt;
  </code></pre>