title: Appended images loaded from file cannot be selected
body: <p>I am using the following script to load images from a folder and append them to a div:</p>
  
  <pre><code>$(function() {
      var folder = "img/moreprojects/";
  
      $.ajax({
          url : folder,
          success: function (data) {
              $(data).find("a").attr("href", function (i, val) {
                  if( val.match(/\.(jpe?g|png|gif)$/) ) {
                      $("#gallery").append( "&lt;div class=\"col-12 col-sm-3\" align='center'&gt;&lt;img class='img-fluid img-thumbnail img-rounded mx-auto d-block' style=\"max-width: 240px; max-height: 240px; margin: 12px;\" src='"+ folder + val +"'&gt;&lt;/div&gt;" );
                  }
              });
          }
      });
  });
  </code></pre>
  
  <p>However, when I call my next script, which opens a model for the image (which works on images already on the page), the images do not open:</p>
  
  <pre><code>$(function() {
      $('img').on('click', function() {
          $('.enlargeImageModalSource').attr('src', $(this).attr('src'));
          $('#enlargeImageModal').modal('show');
      });
  });
  </code></pre>
  
  <p>How can I have this function, which already works for images in HTML already, work for my dynamically loaded images?</p>
  
  <p><strong>Note:</strong> I am using Bootstrap 4 and jQuery.</p>
  
  <h1>EDIT</h1>
  
  <p>HTML structure (I am using Bootstrap 4):</p>
  
  <pre><code>&lt;section class="py-5"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row" id="gallery"&gt;
                  &lt;p class="lead"&gt;Welcome to our gallery! Here we showcase all the images from our projects and other work. Use the toggles below, to switch between a list view and a swiping gallery view!&lt;/p&gt;
                  &lt;br /&gt;&lt;br /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
  &lt;div class="modal fade" id="enlargeImageModal" tabindex="-1" role="dialog" aria-labelledby="enlargeImageModal" aria-hidden="true"&gt;
          &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;img src="" class="enlargeImageModalSource" style="width: 100%;"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>