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

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

但我发现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事件设置脚本.

为了使它工作,您需要根据上面的代码(或者您需要的父代的父代)使用class =“ajaxFancyBox”找到元素的父元素,并将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”(父)的元素,如上例所示,如：

$("#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在内的大多数浏览器中都可以使用(据我所知).

See my demo page here

更新：2012年3月7日.

我被告知此方法仅在您向页面添加新内容时有效,但在替换页面内容时则无效.

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

See demo

Chrome的tabindex解决方法也适用.

标签：javascript,jquery,fancybox
来源： https://codeday.me/bug/20190911/1803762.html