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

Question

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

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

我已尝试使用此代码使其与 AJAX 一起使用，但没有成功。

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

它返回了这个错误：

Uncaught TypeError: $(...).Lightbox is not a function

Answer 1

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

如果您能够使用 Node（或者绕过不使用 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() 将永远不起作用。

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

How to use Lightbox on AJAX loaded content

javascript

jquery

lightbox

bootstrap-5