Тревожное открытие мод Bulma на динамически добавленных модалах - PullRequest
Новая
       4

Тревожное открытие мод Bulma на динамически добавленных модалах

0 голосов
/ 14 марта 2020

TL, DR: перейти к разделу с формулировкой проблемы и jQuery разделам

Немного контекста:

Я делаю сайт, используя Django Backend. В одном из представлений я получаю список удаленных изображений, которые я буду использовать для динамического создания галереи CDN. Эти изображения загружаются правильно и правильно прикрепляются к телу. Я также могу делать эффекты наведения на них и менять курсор. Но когда я нажимаю на эти изображения, они должны открыть Bulma Modal , содержащую изображение, и этого не происходит. Страница как-то реагирует, когда я нажимаю на них, но не так, как они должны. Я использовал эти модалы и раньше, с приведенным ниже кодом, и они отлично работали с моим чистым javascript сценарием, который я написал недавно. Поскольку он не работал, я решил пересмотреть код, теперь учитывая, что мои элементы изображения добавляются динамически, поэтому я переписал свой код в jQuery (для удобства чтения), но конечный результат был таким же.

Постановка проблемы: Галерея изображений, которые добавляются динамически, не открывают соответствующие им модалы после нажатия.

Django HTML: 

.
.
.
<section class="section has-background-white-ter is-sticky-footer">
    <div class="container">
        {% block content %}
        {% endblock %}
        {% block extra_js %}
        {% endblock %}
    </div>
</section>
.
.
.

Рабочая часть моего jQuery: 

const imagesUrls = JSON.parse(document.getElementById('gallery-data').textContent).images;

let idNum = 0;
let $container = $('.container');
let $ancestorTile = $('.tile.is-ancestor');

$ancestorTile.append("<div class='tile is-12-touch is-4-desktop is-vertical is-parent'></div>");
$ancestorTile.append("<div class='tile is-12-touch is-4-desktop is-vertical is-parent'></div>");
$ancestorTile.append("<div class='tile is-12-touch is-4-desktop is-vertical is-parent'></div>");

while (imagesUrls.length > 0) {
    for (var column_index = 0; column_index < 3; column_index++) {
        if (imagesUrls.length === 0) { break; }
        let entryId = "ge".concat(String(++idNum));
        let entryUrl = imagesUrls.pop();

        $(".tile.is-ancestor").find('.tile.is-parent').eq(column_index).append(
            "<div class='tile is-child square-box-small has-shadow'>"+
                "<figure class='image modal-open clickable' data-target='" + entryId + "'>" +
                    "<img src='" + entryUrl + "'/>" +
                "</figure>" +
            "</div>"
        );

        $container.append(
            "<div class='modal' id='" + entryId + "'>" +
                "<div class='modal-close modal-background'></div>" +
                "<div class='modal-content'>" +
                    "<p><img src='" + entryUrl + "' alt=''></p>" +
                "</div>" +
                "<button class='modal-close is-large' data-target='" + entryId + "' aria-label='close'></button>" +
            "</div>"
        );
    }
}

Сломанная часть моего jQuery (полагаю): 

function toggleModalClasses(event) {
    let target = event.currentTarget.dataset.target;
    $(target).toggleClass('is-active');
    $('html').toggleClass('is-clipped');
}

$('.modal-open').on("click", toggleModalClasses);

$('.modal-close').on("click", toggleModalClasses);

Снимок экрана инспектора с визуальным справочником

Screenshot

...