您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

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

1:升级到jQuery v1.7.x(如果尚未安装)

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

为了使它工作,你需要找到parent你的元素与元素class="ajaxfancybox"按你上面的代码(或parentparent,因为你需要它),重视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 +在内的大多数浏览器中运行。

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

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

其他 2022/1/1 18:17:09 有504人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶