Добавленные изображения, загруженные из файла, не могут быть выбраны

Question

Я использую следующий скрипт для загрузки изображений из папки и добавления их в div:

$(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( "<div class=\"col-12 col-sm-3\" align='center'><img class='img-fluid img-thumbnail img-rounded mx-auto d-block' style=\"max-width: 240px; max-height: 240px; margin: 12px;\" src='"+ folder + val +"'></div>" );
                }
            });
        }
    });
});

Однако, когда я вызываю мой следующий скрипт, который открывает модель для изображения (которая работаетна изображениях, уже находящихся на странице), изображения не открываются:

$(function() {
    $('img').on('click', function() {
        $('.enlargeImageModalSource').attr('src', $(this).attr('src'));
        $('#enlargeImageModal').modal('show');
    });
});

Как можно, чтобы эта функция, которая уже работает для изображений в HTML, работала для моих динамически загружаемых изображений?

Примечание: Я использую Bootstrap 4 и jQuery.

РЕДАКТИРОВАТЬ

Структура HTML (я использую Bootstrap 4):

<section class="py-5">
        <div class="container">
            <div class="row" id="gallery">
                <p class="lead">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!</p>
                <br /><br />
            </div>
        </div>
    </section>

<div class="modal fade" id="enlargeImageModal" tabindex="-1" role="dialog" aria-labelledby="enlargeImageModal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <div class="modal-body">
                    <img src="" class="enlargeImageModalSource" style="width: 100%;">
                </div>
            </div>
        </div>
    </div>

Answer 1

Изменение вызова .on('click', ...) с:

$('img').on('click', function() {...});

на

$(document).on('click', 'img', function() {...});

исправлена ​​проблема вызова события щелчкана динамически загружаемых изображениях.