如何将fancybox绑定到动态添加的元素？

Question

我使用jquery fancybox 1.3.4作为弹出表单。

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

像这样：首先我使用jquery将一个元素附加到主体，

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

我叫fancybox，

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

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

我不能从此元素调用fancybox吗？

Answer 1

将fancybox（v1.3.x）绑定到动态添加的元素的最简单方法是：

1：升级到jQuery v1.7.x（如果尚未安装）

2：使用jQuery APIon() + focusin事件设置脚本。

为了使它工作，你需要找到parent你的元素与元素class="ajaxFancyBox"按你上面的代码（或parent的parent，因为你需要它），重视jQueryon()它，因此例如，具有这个网站：

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

.. 如上例所示，我们将使用（the）将eventon()和focusinevent应用于元素，例如：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属性绑定到你所有的元素像的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 +在内的大多数浏览器中运行。

更新：2012年3月7日。

有人告诉我，此方法仅在将新内容添加到页面时有效，而在替换页面内容时无效。

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