Question

我正在使用Easy FancyBox（jQuery FancyBox插件的WordPress插件版本），该工作正常，直到通过AJAX加载内容。我正在使用以下代码加载div以响应单击事件：

$('.jspPane').empty().load(href + ' #load-content');

我试图将FancyBox重新初始化为回调，如下所示：

$('.jspPane').empty().load(href + ' #load-content', function(){
   $('a[rel="gallery1"]').fancybox(); 
});

但它不起作用。有没有人有这种经历？

如果有任何帮助，这里是我正在创建的网站的链接：http://ecbiz119.inmotionhosting.com/~fullbo6/当您点击“照片”导航链接时，会加载应在FancyBox中显示的元素。

提前致谢！

后续行动：

在尝试使用.on（）方法绑定fancybox后，我仍然没有运气。如果有任何帮助，这里是我的脚本文件中的所有jQuery代码：

jQuery(document).ready(function ($) {
    $('#load-content').on('focusin', function () {
        $('a.photos-thumb').fancybox();
    });
    $('#main-nav .page-item-6 a').addClass('active');

    $('#page-content').jScrollPane({
        autoReinitialise: true
    });

    $('#page-content-container, #buy-stuff').hide();

    $('#main-nav').not('.page-item-6').find('a').on('click', function (e) {
        e.preventDefault();
        var href = $(this).attr('href');
        $('#main-nav a').removeClass('active');
        $(this).addClass('active');
        $('#slide-show-container, #updates-wrap .container').hide();
        $('.jspPane').empty().load(href + ' #load-content');

        $('#page-content-container, #buy-stuff').show();
    });

    $('#main-nav .page-item-6').find('a').on('click', function (e) {
        e.preventDefault();
        var href = $(this).attr('href');
        $('#main-nav a').removeClass('active');
        $(this).addClass('active');
        $('#slide-show-container, #updates-wrap .container').show();
        $('#page-content-container, #buy-stuff').hide();
    });

});

Answer 1

Fancybox v1.3.4（您使用的版本）不支持动态添加的元素，但您可以通过jQuery .on()方法绑定这些新元素。

Check this post了解如何操作并将代码调整到您自己的选择器，例如

$("#load-content").on("focusin", function(){ ....

更新：根据评论和对源代码的进一步分析：

您按此顺序加载js文件：

jquery.js?ver=1.7.1
scripts.js?ver=3.3.1
jscrollpane.js?ver=3.3.1
jquery.fancybox-1.3.4.pack.js?ver=1.3.4

您的scripts.js文件（使用.on()方法）尝试在尚未加载fancybox时初始化fancybox。

尝试更改顺序并将自定义脚本文件保留在最后：

jquery.js?ver=1.7.1
jscrollpane.js?ver=3.3.1
jquery.fancybox-1.3.4.pack.js?ver=1.3.4
scripts.js?ver=3.3.1

Answer 2

再次感谢你的帮助，JFK。经过进一步的修补（和拔毛）后，我终于开始工作了。我使用了不同的方法，因此我将其发布在此处，希望它可以帮助其他人。要点是我将fancybox称为.load（）的回调，如下所示：

$('#main-nav')
.not('.page-item-6')
.find('a')
.on('click', function(e)
    {
        e.preventDefault();
        var href = $(this).attr('href');
        $('#main-nav a').removeClass('active');
        $(this).addClass('active');
        $('#slide-show-container, #updates-wrap .container').hide();
        $('.jspPane')
            .empty()
            .load(href + ' #load-content', function()
                {
                    $('a.photos-thumb').fancybox();
                }
            );
        $('#page-content-container, #buy-stuff').show();
    }
);

Answer 3

这个解决方案帮助了我（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();

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

在通过jQuery的“.load（）”方法获取的内容上重新初始化fancybox时遇到问题

3 个答案: