This внутри ajax не работает

Уроки 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).

Источник

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

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

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

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

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

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

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

Добрый день.
Может это конечно и некропост, но все же я хотел написать по поводу 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);», а в скрипте в функции задайте событие для этого значения

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

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

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

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

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

Источник

Почему $(this) не работает?

Я бы хотел, чтобы при нажатии был слайд тоггл, но думаю, что селектор не правильно поставлен.

Подскажите пожалуйста в чем проблема, почему $(this) не работает?

P.S.: jquery подключил

5 ответов 5

Вообще говоря, $(this) у вас работает. Не работает у вас .find(‘.dropb’) — потому что элементы .dropb не являются дочерними для .menu-item .

Надо искать от родителя:

посмотрите мой пример

только не стоит на ссылки вешать дополнительные подписки на click событие.

$(this) в данном случае — это элемент ссылки, внутри него нет .dprop .

Всё ещё ищете ответ? Посмотрите другие вопросы с метками jquery или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.18.40487

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

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

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

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

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

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

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

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

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

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

Источник

Почему не срабатывает success в ajax запросе?

Встретился с проблемой, что не работает «success», сам ajax вроде работает, данные отправляются на обработчик.
javascript:

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

@Norbyt попробуйте выполнить запрос (я заменил строками значения переменных)

Я намеренно убрал указание типа получаемого контента. Выполнили, посмотрели консоль, сделали вывод.
Если сработал success, добавляем dataType: ‘json’ и выполняем, смотрим консоль.

Пишем сюда и потом думаем, что и как.

@Norbyt вы точно делали то, что я написал? Проблему нужно искать, уменьшая проблемный код. Если вам требуется DOMContentLoaded, то это значит, что вы продолжаете тестировать посторонний проблемный код. Так можно долго ковыряться.

Ещё раз — создайте пустой документ и в нём выполните ровно то, что я просил.
ПыСы. $(document).ready() => $()

@Norbyt ничего вы не забыли. Уберите. Срочно.
Аргументом метода click (и всех методов для работы с событиями) может быть только функция, а не результат её работы. То есть срабатывает click, и только тогда запускается RunAjax.

Это значит, что ошибка осталась в коде.

ПыСы. И зачем вы называете свои ошибки позорными? Это — моя работа, а вы делаете её за меня:)) Шучу. Я их так тоже не называю.

Источник