问题描述
我正在使用 Fancybox (http://fancybox.net) 来打开一个 iFrame.为此,我创建了一个链接,其类设置为item_pop",如下所示:
<a href="http://www.example.com" class="item_pop">我的链接</a>
然后我在页脚中有一些 JavaScript 支持:
jQuery(".item_pop").fancybox({宽度":900,'高度':500,'autoDimensions' : 真,'自动缩放':真,'transitionIn':'弹性','titleShow' : 假,'transitionOut':'弹性','centerOnScroll' : 真,'类型':'iframe'});
好的,所以这一切都很顺利.问题是我使用 jQuery 来动态创建这样的附加链接:
jQuery(document).ready(function(){更新秒 = 20;update_duration = update_seconds * 1000;window.setInterval(reload_events, update_duration);});函数 reload_events(){jQuery.post("http://www.example.com", {type:'any'}, function(data){var 事件 = eval(data);var html = '';for(var i=0; i
这实际上显示了指向屏幕的链接,但是当您单击它们时,它们不会弹出 iFrame.相反,他们将预期页面作为新页面打开,而不是作为现有页面内的 iFrame.
有什么想法吗?干杯
解决方案
发生的事情是
jQuery(".item_pop")
找到匹配选择器的元素当时并绑定到那些.由于您稍后要创建新元素,因此您需要绑定到它们.
在这次通话之后:
jQuery('#events').append(html);
您需要在这组新元素上再次运行
.fancybox()
调用:
jQuery("#events .item_pop").fancybox({ ... });
或者(效率较低)您可以使用
.livequery()
插件,像这样:
jQuery(".item_pop").livequery(function() {jQuery(this).fancybox({宽度":900,'高度':500,'autoDimensions' : 真,'自动缩放':真,'transitionIn':'弹性','titleShow' : 假,'transitionOut':'弹性','centerOnScroll' : 真,'类型':'iframe'});});
I'm using Fancybox (http://fancybox.net) to pop open an iFrame. In order to do so, I create a link with a class set to "item_pop" as so:
<div id="events">
<a href="http://www.example.com" class="item_pop">My Link</a>
</div>
I then have some JavaScript in the footer that supports this:
jQuery(".item_pop").fancybox({
'width' : 900,
'height' : 500,
'autoDimensions' : true,
'autoScale' : true,
'transitionIn' : 'elastic',
'titleShow' : false,
'transitionOut' : 'elastic',
'centerOnScroll' : true,
'type' : 'iframe'
});
Ok, so this all works swimmingly. The problem is that I use jQuery to create additional links like this on the fly as so:
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);
});
}
This actually displays the links to screen, but when you click on them they don't pop up the iFrame. Instead they open the intended page as a new page, rather than as an iFrame inside the existing page.
Any ideas? Cheers
解决方案
what's happening is that
jQuery(".item_pop")
finds elements matching the selector at that time and binds to those. Since you're creating new elements later, you need to bindto them.
After this call:
jQuery('#events').append(html);
You need to run the
.fancybox()
call again, on this set of new elements:
jQuery("#events .item_pop").fancybox({ ... });
Or alternatively (and less efficient) you can use the
.livequery()
plugin, like this:
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'
});
});
这篇关于使用 jQuery 附加动态生成的 html 不能很好地与 Fancybox 配合使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!