我使用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(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在内的大多数浏览器中都可以使用(据我所知).
更新:2012年3月7日.
我被告知此方法仅在您向页面添加新内容时有效,但在替换页面内容时则无效.
该方法实际上适用于上述两种情况中的任何一种.只需确保新的替换内容也加载到应用.on()方法的容器中.
Chrome的tabindex解决方法也适用.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。