Блог

Главная - Вопросы по программированию - Добавленные изображения, загруженные из файла, не могут быть выбраны

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

#javascript #jquery #twitter-bootstrap #bootstrap-4

#javascript #jquery — jquery — запрос #твиттер-bootstrap #bootstrap-4 #jquery #twitter-bootstrap

Вопрос:

Я использую следующий скрипт для загрузки изображений из папки и добавления их в 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>

Комментарии:

1. Можете ли вы опубликовать свою HTML-структуру и библиотеки, которые вы используете, чтобы вам было проще помогать?

2. Что именно вы ожидаете получить в ответ на запрос ajax и какой ответ вы получаете?

3. Ответ работает нормально, изображения отображаются. Не работает только вызов on click.

Ответ №1:

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

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

Для

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

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