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

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

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

为了使它工作，你需要找到parent你的元素与元素class="ajaxFancyBox"按你上面的代码（或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"(the 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+）中工作（据我所知）。

在此处查看我的演示页面

更新：2012 年 3 月 7 日。

有人告诉我，此方法仅在向页面添加新内容时有效，而在替换页面内容时无效。

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

看演示

tabindexChrome的解决方法也适用。

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

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

你可以尝试这样的事情：

 $(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'
            }
        );
}

正如上面评论中所建议的，我们可以在此类问题中使用以下方法（将元素绑定到动态元素） -

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

我回答了同样的问题，您可以在以下位置找到答案

使用 jQuery 附加动态生成的 html 不能很好地与 Fancybox 配合使用