使用jQuery追加动态生成的html与Fancybox不兼容
我正在使用Fancybox（ http://fancybox.net ）弹出一个iFrame。 为了做到这一点，我创建了一个类设置为“item_pop”的链接，如下所示：
然后我在页脚中有一些支持这个的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 += 'My Link'; } jQuery('#events').children().remove(); jQuery('#events').append(html); }); }
这实际上显示了指向屏幕的链接，但是当您点击它们时，它们不会弹出iFrame。 相反，他们将目标页面打开为新页面，而不是作为现有页面内的iFrame。
有任何想法吗？ 干杯
发生的事情是jQuery(".item_pop")找到当时与选择器匹配的元素并绑定到那些元素。 由于您以后要创建新元素，因此需要绑定它们。
通话结束后：
jQuery('#events').append(html);
您需要在这组新元素上再次运行.fancybox()调用：
jQuery("#events .item_pop").fancybox({ ... });
或者（效率较低）你可以使用.livequery()插件 ，如下所示：
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' }); });
我认为问题是fancybox对这些额外的链接一无所知，因为JavaScript只被解释为页面加载。 您需要使用jQuerys .Live （），以便fancybox知道任何动态创建的内容。
如果您希望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文件，你就不需要更改你的代码了。