当内容是动态的ajax（灯箱）时如何触发不显眼的javascript答案

【问题标题】：How to trigger unobtrusive javascript when the content is dynamic with ajax (Lightbox)当内容是动态的ajax（灯箱）时如何触发不显眼的javascript
【发布时间】：2012-02-14 16:48:45
【问题描述】：

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

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

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

有什么办法吗？

【问题讨论】：

标签： ajax jquery unobtrusive-javascript

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：