我正在使用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);
jQuery("#events .item_pop").fancybox({ ... });
或者(效率较低)您可以使用.livequery() plugin,如下所示：
jQuery(".item_pop").livequery(function() {
jQuery(this).fancybox({
'width' : 900,'type' : 'iframe'
});
});
