如何将fancybox绑定到dynamic添加的元素？
我使用jQuery的fancybox 1.3.4作为stream行的forms。
但我发现fancybox无法绑定到元素dynamic添加。 例如当我添加一个html元素到当前文档。
像这样：首先我追加一个元素给body使用jquery，
$(document.body).append("<a href="home/index" class="fancybox"/>"); 我叫fancybox，
$(".ajaxFancyBox").fancybox({padding: 0});
但fancybox不能使用dynamic添加的元素。
我不能从这个元素调用fancybox？
我来自中国。 所以我的英文很差，请原谅我。
将fancybox（v1.3.x）绑定到dynamic添加的元素最简单的方法是：
1：升级到jQuery v1.7.x（如果你还没有）
2： on() + focusin事件on()使用jQuery API设置脚本。
为了使它工作，你需要按照上面的代码（或者你需要它的parent的parent ）findclass="ajaxFancyBox"元素的parent元素，然后jQuery on()附上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" （ parent ）的元素，如上例所示：
$("#container").on("focusin", function(){ $("a.ajaxFancyBox").fancybox({ // fancybox API options here 'padding': 0 }); // fancybox }); // on
您可以根据需要应用任何fancybox选项。 另外，对于不同types的内容（在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日。
我被告知，这种方法只适用于当你添加新的内容到页面，而不是当你replace页面的内容。
该方法实际上适用于上述两种情况之一。 只要确保新的replace内容也在应用.on()方法的容器内加载。
看演示
Chrome的tabindex解决方法也适用。
你可以尝试这样的事情：
$(document.body).append("<a href='home/index' class='fancybox' onclick='showFancybox()'/>");
然后创build一个函数来显示Fancybox：
function showFancybox(){ $.fancybox( '<h2>Hi!</h2><p>Content of popup</p>', { 'autoDimensions' : false, 'width' : 350, 'height' : 'auto', 'transitionIn' : 'none', 'transitionOut' : 'none' } ); }
你正在指定错误的类名，请尝试这个：
$(".fancybox").fancybox({padding: 0});
正如上面的评论所build议的，我们可以在这类问题中使用以下方法（绑定元素到dynamic元素） –
$("#container").on("focusin", function(){ if($(this).hasClass("fancybox-bind")){ //check if custom class exist return 0; //now fancybox event will not be binded }else{ //add class to container $(this).addClass("fancybox-bind"); } $("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
我回答了这个问题，你可以在这里find答案
使用jQuery附加dynamic生成的html与Fancybox不兼容
