如何在 AJAX 加载的内容上使用 Lightbox

Question

赏金将在 6 天后到期。 此问题的答案有资格获得+50声望赏金。 Juan Cullen想引起更多人对这个问题的关注。

我正在使用 Boostrap 5 和这个灯箱库https://trvswgnr.github.io/bs5-lightbox/

它在正常加载的页面上工作正常，但不会在 AJAX 加载的内容上加载。

我已尝试使用此代码使其与 AJAX 一起使用，但它不起作用。

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).Lightbox();
});

它返回了这个错误：

未捕获的类型错误：$(...).Lightbox 不是 function

Answer 1

如果您使用的是 vanilla JS 版本，则该脚本仅将事件处理程序添加到脚本加载时存在的具有data-toggle="lightbox"属性的元素，因此通过 AJAX 调用加载的新元素不起作用。

如果您能够使用 Node（或者不使用带有 RequireJS 之类的模块加载器的节点），则可以根据文档在每个新元素加载时实例化一个新的 Lightbox：

$(document).on('click', '[data-toggle="foo"]', function (event) {
    event.preventDefault();
    const el = $(this);
    const lightbox = new Lightbox(el);
    lightbox.show();
});

请注意，此处的正确语法是从元素创建一个新的灯箱，然后使用lightbox.show() ... $(this).Lightbox()将永远无法工作。