我使用jquery fancybox 1.3.4作为弹出表单。
但是我发现fancybox无法绑定到动态添加的元素。例如,当我向当前文档中添加html元素时。
像这样:首先我使用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 APIon() + focusin事件设置脚本。
on()
focusin
为了使它工作,你需要找到parent你的元素与元素class="ajaxFancyBox"按你上面的代码(或parent的parent,因为你需要它),重视jQueryon()它,因此例如,具有这个网站:
parent
class="ajaxFancyBox"
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
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
tabindex
<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()方法的容器内即可。
.on()