如何正确编写成功的插件代码

Question

该网站有一个可以无休止滚动下载内容的页面。页面上还有一个库，使用lightgallery插件实现。加载页面时，插件可以工作，但加载新内容后，插件仅在加载的内容中停止工作。

如何正确放置lightGallery插件代码，使其每次都加载js？我是否正确添加了此代码？

脚本插件

$(document).ready(function() {
function createLightGallery() {
$('.gallery-img').lightGallery({
thumbnail: true,
width: '1104px',
height: '80vh',
selector: '.item-image-gallery'
});
}
createLightGallery();
})

js代码success

success: function(obj) {
send = true;
$article_list.append(obj);
const players = Array.from(document.querySelectorAll('#videoPlay')).map(p => new Plyr(p));
const plyrs = Array.from(document.querySelectorAll('#plyrVideo')).map(plyrs => new Plyr(plyrs));
page.getAsideHtml(_url_aside);
page.scrollPage();
//js plugin
createLightGallery();
},

这是一种错误

script.js:7119 Uncaught ReferenceError: createLightGallery is not defined
at Object.success (script.js:7119)
at c (script.js:2)
at Object.fireWith [as resolveWith] (script.js:2)
at l (script.js:2)
at XMLHttpRequest.<anonymous> (script.js:2)

Answer 1

基于一个错误，我看到您正在尝试运行一个在不同范围中定义的函数。加载方法是否也包含在$(document).ready(function() {块中？

您应该把所有东西都放在里面，因为在其他情况下，代码将无法猜测您在哪里定义了createLightGallery方法。

有关JavaScript范围的更多信息

示例，伪代码解决方案：

$(document).ready(function() {
function createLightGallery() {
$('.gallery-img').lightGallery({
thumbnail: true,
width: '1104px',
height: '80vh',
selector: '.item-image-gallery'
});
}
createLightGallery();
function yourFetchMethod {
// some code here
success: function(obj) {
send = true;
$article_list.append(obj);
const players = Array.from(document.querySelectorAll('#videoPlay')).map(p => new Plyr(p));
const plyrs = Array.from(document.querySelectorAll('#plyrVideo')).map(plyrs => new Plyr(plyrs));
page.getAsideHtml(_url_aside);
page.scrollPage();
//js plugin
createLightGallery();
}
yourFetchMethod(); // or any way you trigger it
})

Answer 2

尝试过这样做，一切都成功了。

success: function(obj) {
send = true;
$article_list.append(obj);
const players = Array.from(document.querySelectorAll('#videoPlay')).map(p => new Plyr(p));
const plyrs = Array.from(document.querySelectorAll('#plyrVideo')).map(plyrs => new Plyr(plyrs));
//Gallery JS
$('#gallery-img').data('lightGallery').destroy(true);
$('#gallery-img').lightGallery({
thumbnail: true,
width: '1104px',
height: '80vh',
selector: '.item-image-gallery'
});
page.getAsideHtml(_url_aside);
page.scrollPage();
},