Question

我使用jquery fancybox 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（v1.3.x）绑定到动态添加元素的最简单方法是：

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

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

要使其有效，您需要根据上面的代码parent找到元素的class="ajaxFancyBox"元素（或parent parent。它）并附加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选项。此外，您可能针对不同类型的内容（在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

更新：2012年3月7日。

我被告知此方法仅在您向页面添加新内容时有效，但在替换页面内容时则无效。

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

See demo

Chrome的tabindex解决方法也适用。

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

正如上面的评论中所建议的那样，我们可以在这种问题中使用以下方法（对动态元素的绑定元素） -

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

Answer 5

我回答了同样的问题，你可以在

找到答案

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

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

5 个答案: