Не работает скрипт после ajax

Форум

Справочник

Страница 1 из 2

1

2

>

Опции темы

Искать в теме

Есть форум на PHPBB3, есть блоки в сообщениях, которые изначально свернуты и разворачиваются при наведении на них мышкой.

При добавлении нового сообщения через быстрой ответ с поддержкой ajax мой скрипт перестает работать для такого сообщения (аякс).

Как мне пояснил разработчик быстрого ответа
Потому что скрипты работают на той html-разметке, которая появилась после загрузки страницы, а не обновилась позже без перезагрузки.

Возможно ли перезагрузить скрипт для всей страницы при обновлении аякс? т.е. отключить мой скрипт и включить его заново, например по событию .ajaxComplete()? но именно предварительно отключить, чтобы не было двойного выполнения скрипта, подключенного в document ready.

на всякий случай приложу скрипт, который сейчас подключается в document ready

если для иллюстрации нужна ссылка на страницу где можно посмотреть — приложу, если это не запрещено.

Источник

Как использовать плагины jquery с динамическим контентом или почему после AJAX отваливается javascript

Подключил на страницу несколько суперплагинов:

Но после загрузки через AJAX код перестает работать! Как это исправить?!

1 ответ 1

Говорить, что «код перестает работать» — некорректно. Потому что код работать и не начинал. Когда вы пишите $(селектор).метод() — это означает однократный вызов метода. Этот метод применяется ко всем элементам, соответствующим переданному селектору, которые в этот момент были на странице.

Обычно говорят, что чтобы исправить ошибку, надо после обновления страницы через ajax выполнить код еще раз. Но это не всегда верно.

Повторное выполнение вызова вида $(«.bar»).bar(); вызовет плагин bar не только на новых элементах — но и на старых. В лучшем случае будет бесполезно потраченное время. Но в худшем случае из-за повторного вызова что-нибудь поломается (а если вы подписывались на события — то что-нибудь поломается гарантировано!). Поэтому надо применять плагины только к обновленному контейнеру.

Также бывают грабли с тем, как вызывать эти плагины после обновления. Обычно это пытаются делать через инлайн script в ответе сервера — но в таком случае этот скрипт не имеет доступа к обновляемому элементу. Надо искать в коде где происходит само обновление — и править там.

Выше был общий принцип. Ниже я напишу способ, которым можно попытаться заставить заработать код в простом случае.

Собираем все «улучшения» страницы в одном месте:

Изменяем получившуюся функцию так, чтобы она действовала только внутри переданного ей контейнера:

Здесь мы воспользовались методом find , который ищет дочерние элементы.

Важно! Функция applyPlugins не должна обращаться к элементам за пределами переданного ей контейнера $cnt !

Находим в коде те места, где выполняется динамическое обновление содержимого или создание элементов.

Это может быть вызов .html(. ) :

В таком случае надо после вызова html добавить вызов applyPlugins :

Это может быть вызов .load() :

В таком случае надо добавить туда параметр с функцией обратного вызова:

Это может быть и что-то другое. Но все же надеюсь что вы это место найдете — это же ваш код, а не чей-то еще 🙂

Способ выше не будет работать если используемый для плагина селектор проходит через динамический контейнер:

В таком случае попытка прямого переписывания в applyPlugins в виде $cnt.find(«.foo .bar .baz»).somePlugin() будет неудачной, поскольку ни .foo , ни .bar не являются дочерними элементами для обновляемого контейнера.

В таком случае вам, наверное, стоит более внимательно отнестись к тому что и как вы обновляете или загружаете вместо слепого применения трюка с applyPlugins.

Или же можно попытаться сделать как-то так, чтобы предусмотреть все случаи — но этот код для понимания и для отладки будет довольно тяжелым:

(Здесь проверяется, является ли текущий контейнер элементом .foo или его дочерним элементом, и если является — в пути .foo .bar .baz пропускается первый элемент. Этот код предполагает, что один .foo не может быть вложен в другой. То же самое для .bar .)

PS хотя я говорил только про плагины, ответ можно применять и для подписки на события. Но это будет не самый лучший способ — потому что есть способ проще. Большинство событий является всплывающими — а потому их можно отлавливать в корне документа. И JQuery имеет встроенные механизмы для фильтрации всплывших событий. Пример:

Этот обработчик будет слушать нажатия на любые ссылки с установленным атрибутом data-href независимо от того, как и когда они появились на странице.

Источник

Уроки JavaScript – не работают события jQuery после AJAX загрузки

Если вы используете AJAX на своем сайте, имейте в виду, что такие события, как клик (click), отправка (submit), наведение (hover), могут не работать, если вы не прикрепите их правильно. В сегодняшней статье мы рассмотрим практическое решение проблемы, когда не срабатывают события в jQuery после динамического изменения страницы (или AJAX).

Описание задачи

Допустим, у нас есть блоки с заголовком и скрытым контентом в теге

. По клику на заголовке, скрытый контент показывается/прячется с помощью функции toggle() :

Потом мы загружаем новые элементы (блоки) без перезагрузки страницы с помощью AJAX. Когда мы перезагружаем страницу – все работает нормально, но если новые элементы подгружаются AJAX’ом, — не работает функция toggle() .

Вариант решения №1

Событие click прикрепляется к существующим элементам после полной загрузки страницы. Ключевое слово здесь – существующим. Когда мы загружаем что-то с помощью AJAX, мы манипулируем DOM. Мы размещаем абсолютно новый элемент, который не существовал при загрузке страницы. Поэтому нам нужно прикрепить это событие после подгрузки нового контента. Если вы используете функцию .load() (которая загружает данные с сервера и помещает возвращенный HTML в соответствующие элементы), вам просто нужно поместить функцию click() в функцию обратного вызова:

Так мы прикрепляем событие click и к новым добавленным элементам.

Если вы используете функцию .ajax() вместо .load() , просто присоедините событие к функции .done() (которая добавляет обработчик, что будет вызываться при обработке отложенного объекта) AJAX вызова.

Вариант решения №2

Что делать, если мы не хотим прикреплять событие каждый раз, когда вызывается AJAX? Для этого есть другое, более «глобальное» решение. Мы можем использовать функцию .on() .

Функция .click() похожа с .on(‘click’) , но здесь есть одна важная часть – при второй функции мы можем делегировать событие. Преимущество делегированных событий заключается в том, что они могут обрабатывать события для элементов-потомков, которые добавляются в документ позднее (например, при AJAX).

Поэтому вместо того, чтобы прикреплять событие click к завершенному AJAX, мы просто добавляем его более «глобально»:

Мы могли бы присоединить обработчик и к тегу , но лучше прикреплять делегированные события как можно ближе к целевым элементам в документе. Нужно избегать чрезмерного использования document или document.body для делегированных событий на больших страницах с большим DOM.

Делегированное событие должно быть присоединено к элементу, который существует на странице в то время, когда ваш код выполняет вызов, и не изменяется во время AJAX вызовов.

В более ранних версиях jQuery вместо .on() использовались функции .live() (устарела с версии jQuery 1.9) или .delegate() (устарела с версии jQuery 3.0).

Источник

После ajax не работает jquery?

но при подгрузке новых постов перестает работать слайдер поста

Alexander_peshkov,
В Исходниках фоторамы можно найти кусок кода, отвечающий за инициализацию библиотеки на моменте DOMContentLoaded:

Когда вы выводите изначальное состояние на страницу (1 страница пагинации), карточки инициализируются кодом из фоторамы, а далее — нужно делать это самому.
Соответственно, вам нужно после добавления новых карточек на страницу — инициализировать их, кусок кода выше.

Я нашел такой кусок кода

но что дальше делать в ступоре)

В success callback, Вам нужно вызвать код инициализации :

Зачем вы сделали data-auto=false ? В вашем случае его можно оставить, иначе первая страница инициализироваться не будет.
Я не пользовался фоторамой, у меня под рукой подобного стенда нет,
В теории если вызывать каждый раз после подгрузки новой страницы — то в выборку будут попадать уже инициализированные элементы и могут возникнуть баги.

Вот вам тестовый стенд, где есть эмуляции кнопки «показать еще», нажимаете кнопку — добавляются новые карточки и у них работает фоторама ( в данном стенде фоторама выражается кнопкой фуллскрина в правом верхнем углу картинки )

Источник

Почему не работает javascript после ajax получения ответа?

На странице реализована фильтрация товаров через ajax.
После получения ответа от сервера и его вставки на страницу перестает работать скрипт с ховер эффектом.

Скрипт подключен в head

Код отправки ajax запроса и обработка ответа

Пробовала строку
$(«#sectionproducts»).empty().append(content);
заменить на
$(«#sectionproducts»).empty().html(content);
Результат не меняется

Как можно решить проблему работы скриптов после отправки ajax запроса?

• Вопрос задан более трёх лет назад
• 33021 просмотр

Добрый день.
Может это конечно и некропост, но все же я хотел написать по поводу 2го пункта, про событие jQuery.on().
Везде написано

Но более точное и правильное я нашел в сети, чтобы скрипт отрабатывал именно на подгруженных ajax элементах:

Решено! JQuery обработчики, такие как hover(), click(), bind(), on() и т.д. обрабатывают элементы только при загрузке.
Чтобы они реагировали на подгруженный ajax’ом контент, есть несколько решений:

1. Загрузить ajax’ом скрипт заново(не лучший вариант). Но работает.
2. Использовать обработчик live(). Но с версии >= JQuery 1.9 его убрали и перенесли в обработчик on(), в котором объединили и bind(), и delegate().
3. На мой взгляд, самый лучший. Для тега установить атрибут onClick, установить ему значение функции, например:
   а в скрипте переделать обработчики в функцию.
   Вместо:

Т.е. у тэга div при нажатии атрибут onClick вызывает эту функции. И тут без разницы, подгружен контент ajax’ом или нет.
Если хотите в функции использовать значение $(this), то задайте в атрибуте у функции onClick=»function_name(this);», а в скрипте в функции задайте событие для этого значения

Надеюсь, кому-то будет полезно 🙂

Почему такой вариант не рассматривается?

Я так пользуюсь давно. сам когда-то натыкался на это, но так же быстро решил. оказывается это прям ВОПРОС))

Для извращенцев, вот так ещё можно:

Спасибо, по всякому уже пробовал, это помогло!

Источник