使用 jQuery 附加动态生成的 html 在 Fancybox 中效果不佳答案

【问题标题】：Appending dynamically generated html using jQuery does not play well with Fancybox使用 jQuery 附加动态生成的 html 在 Fancybox 中效果不佳
【发布时间】：2010-08-26 10:12:20
【问题描述】：

我正在使用 Fancybox (http://fancybox.net) 弹出一个 iFrame。为此，我创建了一个链接，其类设置为“item_pop”，如下所示：

<div id="events">
    <a href="http://www.example.com" class="item_pop">My Link</a>
</div>

然后我在页脚中有一些支持此功能的 JavaScript：

jQuery(".item_pop").fancybox({
        'width'             : 900,
        'height'            : 500,
        'autoDimensions'    : true,
        'autoScale'         : true,
        'transitionIn'      : 'elastic',
        'titleShow'         : false,
        'transitionOut'     : 'elastic',
        'centerOnScroll'    : true,
        'type'              : 'iframe'
});

好的，所以这一切都很顺利。问题是我使用 jQuery 来动态创建像这样的附加链接：

jQuery(document).ready(function(){
        update_seconds = 20;
        update_duration = update_seconds * 1000;

        window.setInterval(reload_events, update_duration);
});

function reload_events()
{       
        jQuery.post("http://www.example.com", {type:'any'}, function(data){
            var events = eval(data);
            var html = '';

            for(var i=0; i<events.length; i++){
                var evt = events[i];

                html += '<a href="http://www.example.com" class="item_pop">My Link</a>';
            }

            jQuery('#events').children().remove();
            jQuery('#events').append(html);
        });
}

这实际上显示了屏幕链接，但是当您单击它们时，它们不会弹出 iFrame。相反，他们将预期页面作为新页面打开，而不是作为现有页面中的 iFrame。

有什么想法吗？干杯

【问题讨论】：

标签： jquery jquery-plugins append fancybox

【解决方案1】：

发生的事情是jQuery(".item_pop") 找到匹配选择器的元素当时并绑定到这些元素。由于您稍后会创建新元素，因此您需要绑定到它们。

这次通话后：

jQuery('#events').append(html);

您需要在这组新元素上再次运行.fancybox() 调用：

jQuery("#events .item_pop").fancybox({ ... });

或者（但效率较低）您可以使用.livequery() plugin，如下所示：

jQuery(".item_pop").livequery(function() {
  jQuery(this).fancybox({
    'width'             : 900,
    'height'            : 500,
    'autoDimensions'    : true,
    'autoScale'         : true,
    'transitionIn'      : 'elastic',
    'titleShow'         : false,
    'transitionOut'     : 'elastic',
    'centerOnScroll'    : true,
    'type'              : 'iframe'
  });
});

【讨论】：

嗨，谢谢。在 HTML 输出到屏幕后，我使用了您的建议再次运行 Fancybox 调用，并且效果很好。干杯

【解决方案2】：

我看到的问题是，fancybox 对这些附加链接一无所知，因为 JavaScript 仅在页面加载时被解释。您需要使用 jQuerys .Live() 以便fancybox 知道任何动态创建的内容。

【讨论】：

【解决方案3】：

如果您希望您的 Fancybox 与动态控件一起使用，您应该在 Fancybox 的 JQuery 文件中进行更改。

这就是我的 jquery.fancybox-1.3.4.js 的样子在第 787 行附近：

$.fn.fancybox = function(options) {

   $(this)
.die('click.fb').live('click.fb', function(e) {

   $(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() :
{})))


   e.preventDefault();

此代码在文件中之后是相同的。

一旦您更改了 Fancybox JQuery 文件，您将不需要更改您的代码。

【讨论】：