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

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

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

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

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

我打电话给 fancybox，

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

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

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

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

1：升级到 jQuery v1.7.x（如果还没有）

2：使用设置脚本jQuery APIon() http://api.jquery.com/on/ + the focusin event.

为了使它工作，你需要找到parent你的元素的元素与class="ajaxFancyBox"根据上面的代码（或parent of the 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() and focusin事件到元素id="container" (the 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+）中工作（据我所知）。

在这里查看我的演示页面 http://picssel.com/playground/jquery/jQueryON_13dec11.html

更新：2012 年 3 月 7 日。

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

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

See demo http://picssel.com/playground/jquery/jQueryONreplacingContent_07mar12.html

The tabindexChrome 的解决方法也适用。