如何使用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();