Возникли проблемы при повторной инициализации fancybox для содержимого, полученного с помощью метода jQuery ".load ()".

Question

Я использую Easy FancyBox (версия плагина WordPress для плагина jQuery FancyBox), который работает нормально, пока контент не загружен через 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, загружаются, когда вы нажимаете навигационную ссылку "photos".

Заранее спасибо!

ПОСЛЕДУЮЩАЯ ИНФОРМАЦИЯ:

После попытки использовать метод .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

Еще раз спасибо за вашу любезную помощь, 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 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();

Это просто и чисто.Надеюсь, это поможет.

Answer 3

Fancybox v1.3.4 (версия, которую вы используете) не поддерживает динамически добавленные элементы, однако вы можете связать эти новые элементы с помощью метода jQuery .on().

Проверьте этот пост , чтобы узнать, как это сделать, и настроить код для своих собственных селекторов, таких как

$("#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