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

Question

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

我使用jQueryFancyBox 1.3.4作为POP表单。

但是我发现FancyBox不能绑定到元素动态添加。例如，当我向当前文档添加html元素时。

如下所示：首先，我将一个元素添加到body中，使用jQuery，

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

我打电话给FancyBox

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

但是FancyBox不适用于动态添加元素。

我不能从这个元素打电话给FancyBox？

Answer 1

如果指定了错误的类名，请尝试如下：$(".fancybox").fancybox({padding: 0});

Answer 2

你可以试试这样的方法-也许：&nbsp;$(document.body).append("<a&nbsp;href='home/index'&nbsp;class='fancybox'&nbsp;onclick='showFancybox()'/>");然后创建一个函数来创建和显示FancyBox：function&nbsp;showFancybox(){ &nbsp;&nbsp;&nbsp;&nbsp;$.fancybox( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<h2>Hi!</h2><p>Content&nbsp;of&nbsp;popup</p>', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'autoDimensions'&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'width'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;350, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'height'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;'auto', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'transitionIn'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;'none', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'transitionOut'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;'none' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;);}