動態鏈接上的Fancybox

Question

我已經在SO上搜索過類似主題，但沒有任何解決方案適用於我。我通過Ajax鏈接填充我的頁面。像這樣：

$.post('php/common/auction_view/auction_invoices.php', function(data){ 
    $('#auction-invoices').html(data); 
    //Initiate Fancybox on links 
    $("a.example4").fancybox({ 
      'opacity'  : false, 
      'overlayShow' : false, 
      'transitionIn' : 'elastic', 
      'transitionOut' : 'elastic', 
      'type'   : 'iframe' 
    }); 
}); 

雖然，這是行不通的。有沒有人有辦法解決嗎？ Thanx！

編輯：奧基，找到了解決辦法：

$.post('php/common/auction_view/auction_invoices.php', function(data){ 
$('#auction-invoices').html(data); 
$.getScript("fancybox/jquery.fancybox-1.3.4.js", function(){ 
    $.fancybox.init(); 
    $("a.example4").fancybox({ 
     'transitionIn'  : 'elastic', 
     'transitionOut'  : 'elastic', 
     'overlayShow'  : false, 
     'showCloseButton' : true, 
     'width'    : 450, 
     'height'   : 585, 
     'titleShow'   : false, 
     'type'    : 'iframe' 
    }); 
}); 

}）;

enter code here 

Answer 1

Fancybox v1.3.x不支持動態添加元素。

我回答了類似question here，它使用jQuery .on()方法將fancybox綁定到動態添加的元素。

調整代碼以符合您的容器，如：

$("#auction-invoices").on("focusin", function(){... 

Answer 2

這個答案並沒有幫助我，這是複雜的，但是這是解決方案，幫助我（的jQuery 1.7.2和1.3.4的fancybox）：

開放jquery.fancybox-1.3.4.js和編輯它大約790行這樣

$.fn.fancybox = function(options) { 
    if (!$(this).length) { 
     return this; 
    } 

    $(this) 

     .unbind('click.fb') 
     .live('click.fb', function(e) { 
     $(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {}))) 
      e.preventDefault(); 

該解決方案解決了我的問題，沒有必要到別的任何改變，甚至初始化REM ain像默認。

$(".trigger").fancybox(); 

它很簡單，乾淨。希望有所幫助。