javascript - 如何将 fancybox 绑定(bind)到动态添加的元素？

Question

我使用 jquery fancybox 1.3.4 作为流行形式。

但是我发现fancybox无法绑定(bind)动态添加的元素。例如，当我向当前文档添加一个 html 元素时。

像这样: 首先，我使用 jquery 将一个元素附加到正文中，

  $(document.body).append("<a href="home/index" class="fancybox"/>");

我称之为 fancybox，

  $(".ajaxFancyBox").fancybox({padding: 0});

但 fancybox 不适用于动态添加的元素。

我不能从这个元素调用 fancybox 吗？

Answer 1

将 fancybox (v1.3.x) 绑定(bind)到动态添加的元素的最简单方法是:

1:升级到 jQuery v1.7.x(如果您还没有)

2:使用 jQuery API on() 设置脚本+ focusin 事件。

要使其正常工作，您需要根据上面的代码(或 parent 的 parent 根据需要)并将 jQuery on() 附加到它，例如，有这个 html:

<div id="container">
 <a class="ajaxFancyBox" href="image01.jpg">open image 01</a>
 <a class="ajaxFancyBox" href="image02.jpg">open image 02</a>
</div>

.. 我们将把 on() 和 focusin 事件应用到带有 id="container" 的元素(parent ) 如上例所示，例如:

$("#container").on("focusin", function(){
 $("a.ajaxFancyBox").fancybox({
  // fancybox API options here
  'padding': 0
 }); // fancybox
}); // on

您可以根据需要应用任何 fancybox 选项。此外，您可能针对不同类型的内容(在 on() 方法内)使用不同的脚本，例如:

$("#container").on("focusin", function(){
 $("a.ajaxFancyBox").fancybox({
  // fancybox API options here
  'padding': 0
 }); // fancybox
 $("a.iframeFancyBox").fancybox({
  // fancybox API options here
  'padding': 0,
  'width': 640,
  'height': 320,
  'type': 'iframe'
 }); // fancybox
}); // on

重要:上面的示例在 Chrome 上无法正常工作。 解决方法 是将 tabindex 属性添加到所有绑定(bind)到 fancybox 的元素，例如

<div id="container">
 <a tabindex="1" class="ajaxFancyBox" href="image01.jpg">open image 01</a>
 <a tabindex="1" class="ajaxFancyBox" href="image02.jpg">open image 02</a>
</div>

这解决了这个问题，并且(据我所知)可以在包括 IE7+ 在内的大多数浏览器中运行。

See my demo page here

更新:2012 年 3 月 7 日。

我听说此方法仅在您向页面添加新内容时有效，但在替换页面内容时无效。

该方法实际上适用于上述两种情况。只需确保新的替换内容也加载到您应用 .on() 方法的容器中即可。

See demo

Chrome 的 tabindex 解决方法也适用。