如何将fancybox绑定到动态添加元素？ [英] How to bind fancybox to dynamic added element?

问题描述

我使用jquery fancybox 1.3.4作为pop形式。

I use jquery fancybox 1.3.4 as pop form.

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

but I found fancybox can't bind to element dynamic added. for example when I add a html element to current document.

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

like this: first I append a element to body use jquery,

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

我打电话给fancybox，

and I call fancybox,

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

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

but fancybox don't work with dynamic added element.

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

and I can't call fancybox from this element?

推荐答案

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

The easiest way to bind fancybox (v1.3.x) to dynamically added elements is:

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

1: Upgrade to jQuery v1.7.x (if you haven't yet)

2：使用 jQuery API on（） + focusin 事件。

要使其正常工作，您需要使用类找到元素的父元素=ajaxFancyBox根据您的上述代码（或父的父为你需要它）并在（）上附加 jQuery，例如，拥有这个html：

To make it work you need to find the parent element of your elements with class="ajaxFancyBox" as per your code above (or the parent of the parent as you need it) and attach jQuery on() to it so for example, having this 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>

..我们将在（）上应用和 focusin 事件到元素 id =container（父）如上例所示，如：

.. we will apply on() and focusin event to the element with id="container" (the parent) as in the example above, like:

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

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

You can apply any fancybox option as you need. Additionally you may have different scripts for different type of content (inside the on() method) like:

$("#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的所有元素，例如

IMPORTANT: the example above won't work like that on Chrome. The workaround is to add the tabindex attribute to all of your elements bound to fancybox like

<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 +。

that solves the issue and will work (as far as I know) in most browsers including IE7+.

在此查看我的演示页面

更新：2012年3月7日。

我被告知此方法仅在您添加时有效新内容到页面，但不是在替换页面内容时。

I was told that this method only works when you add new content to the page but not when you replace the content of the page.

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

The method actually works on either of the two scenarios mentioned above. Just make sure that the new replacing content is also loaded inside the container where you applied the .on() method.

查看演示

tabindex Chrome的解决方法也适用。

The tabindex workaround for Chrome also applies.

这篇关于如何将fancybox绑定到动态添加元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！