Как активировать ненавязчивый javascript, когда контент динамический с ajax (Lightbox)

Question

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

<a href="..." class="lightbox"><img src='...'></a>

Обычно это происходит с помощью обработчика загрузки страницы, но, поскольку контент поступает из ajax, UJSне срабатывает.

Есть ли способ сделать это?

Answer 1

Я не уверен, как вы запускаете запросы AJAX, но если это с JQuery, что кажется вероятным, вы можете привязать лайтбокс в обратном вызове успеха:

$.ajax({
    url: '/route',
    success: function (response, status) {
        $('.lightbox').lightbox();
    }
});

Вы можете передать контекст в селектор jQuery, чтобы не прикреплять лайтбокс к ссылкам, уже находящимся на странице, например, если ваш ajax-вызов добавляет ссылки в div с идентификатором 'lightbox_links' , используйте этот селектор вместо:

$('.lightbox', '#lightbox_links').lightbox();

Answer 2

Если контент поступает из AJAX, то не настраивайте обработку событий во время загрузки страницы.Вместо этого пусть событие всплывет в самый верхний контейнер, который не изменяется или не заменяется AJAX.В худшем случае, используйте document как самый верхний узел.

$('<root element selector>').on('click', 'a.lightbox', function() {
    // activate lightbox on the clicked element.
});