当内容是动态的 ajax (Lightbox) 时如何触发不显眼的 javascript

Question

我有一些来自 ajax 的链接需要灯箱功能：

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

通常这是通过页面加载处理程序给出的行为，但由于内容来自 ajax，因此 UJS 不会被触发。

有办法做到这一点吗？

Answer 1

如果内容来自 AJAX，则不要在页面加载期间设置事件处理。相反，让事件冒泡到未被 AJAX 更改或替换的最顶层容器。最坏的情况，使用 document 作为最顶层的节点。

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

Answer 2

我不确定你是如何触发 ajax 请求的，但如果使用 jQuery（这似乎是可能的），你可以在成功回调中绑定灯箱：

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

你可以将上下文传递给 jQuery 选择器，这样你就不会重新 -将灯箱附加到页面中已有的链接，例如，如果您的 ajax 调用将链接添加到 id 为“lightbox_links”的 div，请改用此选择器：

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