将fancybox(v1.3.x)绑定到动态添加的元素的最简单方法是:
1:升级到jQuery v1.7.x(如果尚未安装)
2:使用jQuery APIon()
+ focusin
事件设置脚本。
为了使它工作,你需要找到parent
你的元素与元素class="ajaxfancybox"
按你上面的代码(或parent
的parent
,因为你需要它),重视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()
和focusin
event应用于元素,例如: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 +在内的大多数浏览器中运行。