ajax - 如何通过ajax将fancybox与动态加载的数据一起使用

Question

我正在使用fancybox2.x 来显示数据，我已经将一些数据加载ajax到 div 中，现在来自 ajax 调用的数据是这样的

<a href="sample.php" class="fancy" >sample</a>

在头上我有花式框代码

$(document).ready(function() {

    $(".fancy").fancybox({
        'transitionIn'  :   'fadein',
        'transitionOut' :   'fadeout',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'width'         :   260, 
        'height'        :   260, 
        'overlayShow'   :   false,
        'type'          :   'iframe'            
    });

});

但这不起作用，如果我写

<a href="sample.php" class="fancy" >sample</a>

文档中的相同代码，它可以工作，请告诉我如何通过...等待解决方案来使用fancybox动态加载的数据。ajax

Answer 1

如果我理解正确，这一行：

<a href="sample.php" class="fancy" >sample</a>

页面加载时不存在。但它稍后会通过另一个 ajax 调用加载。如果是这种情况，您的 javascript 代码将不会附加到元素。

编码

$(document).ready(function() {

仅在 DOM 加载后运行。

您需要在 ajax 函数的回调中调用 fancybox 函数（请参阅jQuery ajax 文档中的 Complete ），......或者执行类似这篇博文的操作：将 Fancybox 添加到动态加载的内容