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

Question

我使用jQuery的fancybox 1.3.4作为流行的形式。

但我发现fancybox无法绑定到元素动态添加。例如，当我添加一个html元素到当前文档。

这样的：首先 我一个元素追加到身体使用jQuery，

$(document.body).append("<a href="home/index" class="fancybox"/>"); 

和我打电话的fancybox，

$(".ajaxFancyBox").fancybox({padding: 0}); 

但的fancybox不添加动态元素的工作。

我不能从这个元素调用fancybox？

我来自中国。所以我的英语很差，请原谅我。

Answer 1

将fancybox（v1.3.x）绑定到动态添加的元素最简单的方法是：

1：升级到jQuery的v1.7.x（如果你还没有）

2：设置使用jQuery API on() +的focusin事件脚本。

为了使它工作，你需要找到class="ajaxFancyBox"你的元素parent元素按照你上面的代码（或根据你的需要了parent的parent）和附加jQuery on()它，因此例如，具有这个网站：

<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选项。此外，你可以有一个像针对不同类型的内容（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，包括+。

See my demo page here

更新：3月07日，2012年

有人告诉我，当你添加新的内容页，但不是当你更换页面的内容，此方法只适用。

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

See demo

的tabindex解决方法为Chrome也同样适用。

Answer 2

你指定了错误的类名，试试这个来代替：

$(".fancybox").fancybox({padding: 0}); 

Answer 3

你可以尝试这样的事情也许：

$(document.body).append("<a href='home/index' class='fancybox' onclick='showFancybox()'/>"); 

然后做一个函数来创建和显示的fancybox：

function showFancybox(){ 
    $.fancybox(
      '<h2>Hi!</h2><p>Content of popup</p>', 
      { 
        'autoDimensions' : false, 
       'width'    : 350, 
       'height'   : 'auto', 
       'transitionIn'  : 'none', 
       'transitionOut'  : 'none' 
      } 
     ); 
} 

Answer 4

我回答了这个问题同样喜欢这一点，你可以找到答案，在

Appending dynamically generated html using jQuery does not play well with Fancybox

Answer 5

如上评论所说，我们可以使用下面的这样那样的问题（绑定元素动态元素）的做法 -

$("#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