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

我使用Fancybox（http://fancybox.net）来弹出一个iFrame。为了做到这一点，我创建一个设置为“item_pop”作为这样一类的链接：使用jQuery追加动态生成的html与Fancybox不兼容

<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。

任何想法？干杯

来源

2010-08-26 Craig Myles

发生了什么事是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' 
    }); 
});

来源

2010-08-26 10:20:59

嗨，谢谢。在HTML输出到屏幕后，我使用了你的建议再次运行Fancybox调用，并且它工作得很好。干杯 – 2010-08-26 13:21:16

问题，因为我看到它是fancybox不知道任何关于这些额外的链接，因为JavaScript只解释为页面加载。你需要使用jQuerys .Live()，这样fancybox才会知道任何动态创建的内容。

来源

2010-08-26 10:16:57 MrBliz

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

来源

2013-06-20 11:42:47

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

回答

相关问题