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'
   });
});

虽然，这不起作用。有没有人有办法解决吗？感谢名单！

编辑：Okey，找到了解决方案：

$.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和fancybox 1.3.4）：

打开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();

这个解决方案解决了我的问题，没有必要改变其他任何东西，甚至初始化仍然是默认的。

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

简单而干净。希望有所帮助。

动态链接上的Fancybox

2 个答案: