使用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不兼容

回答

相關問題