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

【问题标题】：How to use Lightbox on AJAX loaded content如何在 AJAX 加载的内容上使用 Lightbox
【发布时间】：2022-01-27 05:58:28
【问题描述】：

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

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

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

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

它返回了这个错误：

未捕获的 TypeError: $(...).Lightbox 不是函数

【问题讨论】：

$(...).Lightbox is not a function 非常明确。灯箱插件未加载。您链接到的文档页面根本没有提到 jQuery 插件。
您在 HTML 中的何处加载 Lightbox？
@double-beep 我的 HTML 可能如下所示：<!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="ajaxContent"></div> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bs5-lightbox@1.7.7/dist/index.bundle.min.js"></script> </body> </html>

标签： javascript jquery lightbox bootstrap-5

【解决方案1】：

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

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

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

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

【讨论】：