使用jQuery追加动态生成的html与Fancybox不兼容

我正在使用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(“.item_pop”)找到当时与选择器匹配的元素并绑定到那些元素.由于您以后要创建新元素,因此需要绑定它们.

通话结束后：

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

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

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

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

jQuery(".item_pop").livequery(function() {
  jQuery(this).fancybox({
    'width'             : 900,'type'              : 'iframe'
  });
});

原文地址：https://www.jb51.cc/jquery/179033.html