Нажмите на динамически добавленный элемент в Magnific Popup не обнаружено. Попытка перейти к следующему элементу по щелчку текущего элемента в галерее AJAX

Question

Нажмите на динамически добавленный элемент в Magnific Popup не обнаружено. Попытка перейти к следующему элементу по щелчку текущего элемента в галерее AJAX

0

Я создаю галерею изображений, где полноразмерные изображения представлены в лайтбокс. Содержимое лайтбокса представляет собой загруженный ajax HTML из внешнего файла. Я использую скрипт Magnific Popup для такого поведения. Я пытаюсь сделать так, чтобы вы могли перейти к следующему изображению галереи, щелкнув в любом месте прямо на текущем изображении, отображаемом в лайтбокс. Проблема в том, что я не смог обнаружить событие щелчка, хотя он явно вставлен в DOM.

Основной вид: main.html

<div class="gallery">
    <a href="gallery.php?photo=image-1.jpg">thumb-1.jpg</a>
    <a href="gallery.php?photo=image-2.jpg">thumb-2.jpg</a>
    <a href="gallery.php?photo=image-3.jpg">thumb-3.jpg</a>
</div>

Содержимое лайтбокса: gallery.php

<?php echo '<img class="item" src="img/' . $_GET['photo'] . '" >'; ?>

JQuery:

$('.gallery').each(function() { 
    $(this).magnificPopup({
        delegate: 'a',
        type: 'ajax',
        gallery: {
            enabled: true,
            navigateByImgClick: true
        }
    });
});

Хотя я не вижу, что параметр navigateByImgClick задокументирован, он, похоже, предназначен для настройки, так что нажатие текущего элемента галереи приведет вас к следующему элементу галереи. Однако, по крайней мере, в моем тестировании это не похоже на работу в галереях ajax (когда type установлен в ajax). Итак, что я сделал, добавлен фрагмент, чтобы узнать, обнаружено ли событие click:

$('.item').on('click', function() {
    alert('click detected');
});

.item - селектор элементов галереи. Однако клик никогда не обнаруживается (предупреждение не отображается при нажатии).

Во-первых, почему не обнаружен клик?

Во-вторых, как настроить Magnific Popup для загрузки следующего элемента галереи при использовании галереи ajax?

TPoy 26 апр. 2014, в 04:52

Источник

Теги:

jquery

magnific-popup

1 ответ

Ещё вопросы

TPoy · Answer 1 · 2014-04-26T01-35-00.000Z

Догадаться. Необходимо присвоить .mfp-img классу .mfp-img. Теперь это работает. Это может быть обнаружено этой частью огромного всплывающего источника:

if(gSt.navigateByImgClick) {
    mfp.wrap.on('click'+ns, '.mfp-img', function() {
        if(mfp.items.length > 1) {
            mfp.next();
            return false;
        }
    });
}