Ajax ломает скрипты jQuery на странице

Question

В настоящее время я работаю над сайтом, который вы найдете здесь: http://steadfastdesignfirm.com/rgw/. Я использовал эффект ajax, который я нашел в Интернете на CSS-Tricks, чтобы динамически загружать контент с другой страницы php и анимировать его (исчезать) и исчезают) при нажатии на вкладку навигации.

Мне удалось заставить это работать нормально, как вы увидите (обратите внимание, что только две рабочие страницы - "Домашняя страница" и "Опыт RGW"), однако все скрипты jQuery в моем документе, которые применяются к элементам внутри div, который перезагружается, прерывается при динамическом генерировании контента.

В качестве быстрого примера, посмотрите на инструмент изменения размера текста под вращателем изображения на домашней странице и попробуйте изменить размер шрифта. Теперь нажмите на вкладку «Experience RGW» и снова прокрутите вниз до инструмента изменения размера текста. Обратите внимание, что теперь, когда мы динамически загружаемся в файл experience.php внутри div "#ajax", скрипт не работает. Кроме того, если вы нажмете на ссылку «Домой» сейчас, вы также заметите, что вращатель изображения не работает.

Я посмотрел высоко и низко в Интернете и на нескольких форумах, чтобы попытаться выяснить, как это исправить, и я считаю, что мне нужно включить функцию jQuery .live, чтобы применить скрипт к любому элементу, независимо от того, виден ли он в данный момент. или нет. В противном случае document.ready запускает сценарии только один раз после загрузки DOM и не влияет на загруженный ajax-контент. Это верно? Если да, то как мне применить это к нескольким файлам jQuery, выполненным на моей странице?

Ну, это сводит меня с ума, и я изо всех сил пытался получить это, но я просто не могу понять это. Я довольно новичок в jQuery, но пытаюсь учиться быстро. Я хотел бы опубликовать часть кода здесь, но есть много вопросов, связанных с этим вопросом. :)

Если кто-то захочет дать быстрый ответ или несколько строк кода, я был бы очень признателен.

К вашему сведению: скрипт, который запускает эффект ajax, находится в ./scripts/page.js. Кроме того, помните, что в настоящее время у меня правильно работают только домашняя страница и страница опыта RGW, поэтому не тратьте время на диагностику проблем на других страницах. Я еще не добрался до них. :)

Вот ссылка на код из jsfiddle: http://jsfiddle.net/taylortsantles/R33YV/.

Спасибо, Taylor

Answer 1

Проблема заключается в нарушении порядка выполнения кода.

1. загрузка страницы
2. событие загрузки запускает и настраивает элементы
3. событие клика
4. ajax загружает новую страницу

На новой странице нет событий для нее. Два решения

1. использовать "живые" ссылки в обратном вызове события window.load
2. используйте снова запустить код загрузки страницы.

Решение 1 хорошо, но если у вас есть определенный плагин, то он не будет полным решением.

Решение 2 может быть реализовано путем извлечения вашего кода из window.load и включения другой функции. Просто все это загружается и затем в обратном вызове при загрузке AJAX.

Я знаю, какое разочарование может быть. Надеюсь, это поможет.

Answer 2

Я за прокси-сервером и не вижу вашей страницы, но похоже, что события не привязываются к контенту, созданному с помощью ajax.

Я постараюсь объяснить, когдаваша страница загружается в первый раз, вы присоединяете события jQuery к объектам DOM в document.ready (), эта функция будет вызываться только один раз.

Каждый раз, когда вы отбрасываете объекты DOM и создаете новые с помощью ответа ajaxк этим новым объектам никогда не присоединяются события jQuery, поскольку функция document.ready () не сработала.

Вы можете попытаться поместить код, присоединяющий к событиям, в другую функцию и вызвать эту функцию в документе.ready () И после каждой модификации DOM (ваш ajax-вызов для изменения содержимого вкладки).

Надеюсь, это поможет.

Answer 3

Вам необходимо перепривязать любые события после динамической загрузки элементов на страницу, поскольку Javascript рассматривает их как совершенно новые элементы DOM.

Этого можно добиться, изменив код, который вы используете для обновления страницы:

    $(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);

    if (newHash) {
        $mainContent
            .find("#ajax")
            .fadeOut(200, function() {
                $mainContent.hide().load(newHash + " #ajax", function() {
                    $mainContent.fadeIn(200, function() {
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                    });
                    $("nav li").removeClass("on");
                    $("nav a[href='"+newHash+"']").parent().addClass("on");

                    // Rebind any events
                    documenttextsizer.setup("text-resize");

                });
            });
    };

});

Это относится к любым событиям, происходящим ВНУТРИ обновленных элементов на странице. Так что после комментария "// Перепривязать любые события" вы можете добавлять других по мере необходимости! Надеюсь, это поможет:)