无限滚动更新页面内容时下一个图像不起作用答案

【问题标题】：Next image doesnt work when page content updated by infinite-scroll无限滚动更新页面内容时下一个图像不起作用
【发布时间】：2018-03-28 10:35:00
【问题描述】：

我使用 fancybox 3 和无限 sctoll。当我向下滚动时，一切正常。但是，如果我打开 1 张图像并按下下一个按钮，$infScroll.infiniteScroll('loadNextPage'); 加载的项目在页面上，但在当前页面的末尾，下一个图像不会通过下一个按钮打开。如果关闭当前弹出窗口并再次打开，则可以在下一页之前再次进入下一页。为什么下一个按钮无法动态添加项目？

$('.gallery').fancybox({
    selector : ".img-box",
    ...
    ,
    afterShow: function(instance, item){
        if (item.index  >=  instance.group.length - 10) {
            $infScroll.infiniteScroll('loadNextPage');
        }
    }
});

【问题讨论】：

标签： javascript infinite-scroll fancybox-3

【解决方案1】：

在页面中添加/删除项目不会自动影响当前打开的 fancybox 画廊。您需要手动更新图库 -

// Call `createGroup` with collection of fresh links 
$.fancybox.getInstance().createGroup( $('.img-box')  );

// Update controls
$.fancybox.getInstance().updateControls();

【讨论】：

谢谢。它有效但效果不佳。奇怪的是，在这个 instance.group 之后包含元素的初学者工具包 + 初学者工具包 + 新元素。示例： ..添加了新元素。 instance.group = 并且在 html 页面开始元素不加倍。如果关闭fancybox画廊并再次打开一切正常。
您应该将 $('.img-box') 替换为“新链接集合”，因为“createGroup”方法会将元素添加到当前组。
我很高兴我发现了这一点，因为我也对选择器文档中的“动态”措辞感到困惑。当前版本（3.5.7）中的“createGroup”是否正确？我在源代码中找不到它，但我找到了一个“addContent”函数，它现在似乎可以正常工作（包括调用 updateControls）。
是的，没错，你现在可以使用addContent方法了。 “动态”与您对 vue/react 的期望不同，这意味着脚本只是将点击事件附加到选择器，以便将来也可以用于添加的项目。