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

问题描述

我使用 jquery Fantasybox 1.3.4 作为弹出表单.

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

像这样:首先我将一个元素附加到 body 使用 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 API on() + focusin 设置你的脚本 事件.

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

<a class="ajaxFancyBox" href="image01.jpg">打开图片01</a><a class="ajaxFancyBox" href="image02.jpg">打开图片02</a>

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

$("#container").on("focusin", function(){$("a.ajaxFancyBox").fancybox({//这里是fancybox API 选项'填充':0});//花式盒子});//在

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

$("#container").on("focusin", function(){$("a.ajaxFancyBox").fancybox({//这里是fancybox API 选项'填充':0});//花式盒子$("a.iframeFancyBox").fancybox({//这里是fancybox API 选项'填充':0，宽度":640，'高度':320，'类型':'iframe'});//花式盒子});//在

重要提示:上面的示例在 Chrome 上不会像那样工作.解决方法是将 tabindex 属性添加到所有绑定到fancybox 的元素中，例如

<a tabindex="1" class="ajaxFancyBox" href="image01.jpg">打开图片01</a><a tabindex="1" class="ajaxFancyBox" href="image02.jpg">打开图片02</a>

这解决了这个问题，并且可以在大多数浏览器(包括 IE7+)中工作(据我所知).

在这里查看我的演示页面

更新:2012 年 3 月 7 日.

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

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

看演示

Chrome 的 tabindex 解决方法也适用.

I use jquery fancybox 1.3.4 as pop form.

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

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

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

and I call fancybox,

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

but fancybox don't work with dynamic added element.

and I can't call fancybox from this element?

解决方案

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

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

2: Set your script using jQuery API on() + the focusin event.

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>

.. 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

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

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>

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

See my demo page here

UPDATE: March 07, 2012.

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.

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.

See demo

The tabindex workaround for Chrome also applies.

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