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。

有什么想法吗？干杯

Answer 1

正在发生的事情是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,
    'height'            : 500,
    'autoDimensions'    : true,
    'autoScale'         : true,
    'transitionIn'      : 'elastic',
    'titleShow'         : false,
    'transitionOut'     : 'elastic',
    'centerOnScroll'    : true,
    'type'              : 'iframe'
  });
});

Answer 2

我看到的问题是fancybox对这些附加链接一无所知，因为JavaScript只被解释为页面加载。您需要使用jQuerys .Live()，以便fancybox知道任何动态创建的内容。

Answer 3

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

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

3 个答案: