jquery - 使用 jQuery append 动态生成的 html 与 Fancybox 配合不佳

Question

我正在使用 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。

有什么想法吗？干杯

Answer 1

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

此次通话后:

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