fancybox 3 不适用于使用 JSON+DOM 操作加载的新内容（用于无限滚动）答案

【问题标题】：fancybox 3 not available for new content loaded with JSON+DOM Manipulation (for endless scrolling)fancybox 3 不适用于使用 JSON+DOM 操作加载的新内容（用于无限滚动）
【发布时间】：2017-08-30 13:54:31
【问题描述】：

我有一个图片库并使用 fancybox v3。通过进入网站，前 20 张图片被加载（使用 PHP 生成），fancybox 连接到这些图片。

HTML 部分如下所示：

##loop##
<div class="item">
  <a  data-fancybox="group" href="<?= $i?>">
        <img src="/thumbnail/<?= $i?>"  />
  </a>
</div>
##/loop##

Fancybox 是这样初始化的：

$().fancybox({
                selector: '[data-fancybox="group"]',
                loop: true,

            });

..这很好用。

现在，如果用户到达页面末尾，则使用 DOM 操作将 JSON 格式的新内容加载并插入到网站中。为此，我使用了一个占位符，它是一个空的 HTML 模板，隐藏在网站中。我将该 DOM 元素克隆到库中，并使用来自 JSON 请求的数据填充新元素。

var px = $('#picturePlaceholder').clone().appendTo('.mygallery');
            px.removeAttr('id');
            px.children('a').attr('href', jsonValues.pictureURL);
            px.children('a').children('img').attr('src', jsonValues.thumbnailURL);
            px.children('a').attr('data-fancybox', "group" );

很遗憾，这不起作用。如果我点击一张新添加的图片，fancybox 就会打开，并且（在每种情况下）都会显示原始图片中的第一张图片。洞察幻想框，我可以“走”穿过初始集合中的所有图片，但我无法到达/看到新加载的图片。

如果我将 JS-Line
px.children('a').attr('data-fancybox', "group" ); 更改为 px.children('a').attr('data-fancybox', "group2" );，则会将新的 fancybox-instance 应用于新的（JSON 数据）记录。

但是，图片查看器无法从初始集合的第一张图片滑动到第二组（已加载 JSON）的最后一张图片。

如果用户再次到达网页末尾，则会再次加载一组新图片并插入到图库中，这会破坏整个fancybox 功能。 Fancybox 不再正确运行。连现有的图片也无法正常打开。

那么我如何处理添加到我的画廊的 JSON 数据并将新数据注入现有的 fancybox 集？

【问题讨论】：

你试过用.data('fancybox', "group" )代替attr吗？
@Janis 是的，我试过了，但没什么区别。问题依然存在。

标签： javascript jquery json fancybox fancybox-3

【解决方案1】：

为了回答我自己的问题，有人有同样的问题：我的问题是基于 fancybox 中的一个错误，该错误已在 3.2.21 及更高版本中修复。

【讨论】：