使用jQuery动态生成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。

有什么想法吗？谢谢。

- Craig Myles

Answer 1

现在发生的情况是，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'
  });
});

- Nick Craver

---

嗨，谢谢。我使用了您的建议，在HTML输出到屏幕后再次运行Fancybox调用，效果很好。干杯！ - Craig Myles

Answer 2

如果您希望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文件，您将不需要更改您的代码。

- Ankit

Answer 3

我认为问题在于fancybox不知道这些额外链接的存在，因为JavaScript仅在页面加载时被解释。你需要使用jQuery的.Live()，这样fancybox就能意识到任何动态创建的内容了。

- MrBliz