Jquery не работает с подгруженными с помощью 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).

Источник

После 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 запроса?

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

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

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

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

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

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

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

Источник

Не работают функции после загрузки элементов через AJAX

На сайте есть кнопка, при клике по ней через AJAX получаю input который размещаю во «всплывающем окне», на этот input в JQuery настроен календарь daterangepicker.

Если закрыть это окошко (добавляется display: none), а затем снова нажать на кнопу, то скрипт срабатывает, и daterangepicker открывает календарик. Но если первый раз нажали то ничего не происходит, функция не отрабатывается.

Похожее решал с помощью получения не только input, но и script. В этот раз это не помогло.

Пытался обхитрить, но тоже не вышло:

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Индикатор загрузки контента через AJAX
Здравствуйте. Ситуация такая: при клике по ссылке аяксом получаю данные (текст и изображения). На.

После загрузки файлов на хостинг не работают ссылки
Здравствуйте. Помогите мне пожалуйста. Оплатила хостинг, у них же оплатила доменное имя. В папку с.

Не работают USB-порты после загрузки Windows
Здравствуйте. В биосе всё работает, когда загружается винда, работает только клавиатура, т.к. она.

Ajax — после загрузки не могу получить элемент
Как быть в такой ситуации, после загрузки аяксом контента в таблицу. У меня не доступны элементы.

повесил на подгружаемые элементы обработчики onclick и onchange, составил соответствующие функции и повесил их на обработчики.

Добавлено через 28 секунд

Отобразить картинку полученную ajax после ее загрузки
Здравствуйте. Получаю ajax-ом код в котором есть немного текста, картинка, и немного js-а которым.

Не работают скрипты в подгруженном через AJAX документе
Добрый день! Использую AJAX для подгрузки контента: function loadHTML(sURL) < var.

PHP,AJAX,jq,Mysql работают через раз
Привет! Не могу разобраться, в чем ошибка. Вроде все работало, а сейчас перестало, и если.

Источник

AJAX не видит события на загружаемых им элементах

Всем привет. Сегодня столкнулся с такой задачей, на свой сайт решил сделать слайдер с рекламными баннерами, сделал, слайдер отлично работает. Стал его загружать на сайте с помощью AJAX и вот тут .опа.. Слайдер не работает, работает лишь в том случае если его вставить в открытую в html код страницы, а если загружать слайдер через AJAX то не работает. Как сделать чтобы AJAX видел события и код прикрученный к элементам которые он загружает и которых естественно нет в открытом видео на html странице?

Добавлено через 1 минуту
Вот на первой странице своего сайта http://www.virtuality-games.ru/index.html я вставил слайдер в html код страницы поэтому он работает, слайдер тот который маленький сразу под большим слайдером, на других страницах его нет т.к. пока что отключил его загрузку через AJAX пока не найду решение.

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Срабатывание ajax на динамечки созданных элементах
Здравствуйте. Не могу разобраться подскажите $(‘#username’).blur(function()< $.ajax(<.

События Ajax в Jquery
Доброго времени суток. подскажите пожалуйста, в чем я не прав. Имеется код JQuery: $(function() <.

AJAX. Ожидание события от PHP
Добрый день! Возник вопрос самой логики: Сторонняя программа вызывает PHP-файл, например.

Как вызывать события подгруженных компонентов из ajax?
Добрый день! Обрисую ситуацию. У меня есть страница index.html в ней javascript код и пустая.

Решение

Вам надо использовать делегированную обработку данных. Т.е. вешать события на родительские элементы (хоть на ), которые существуют в момент загрузки страницы. Просто пример — предположим вы дополнили список

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

а вот такая конструкция

Как вызывать ajax функцию без события?
Добрый день. Подскажите, как можно вызывать ajax функцию без событий, то есть нажатия кнопок и тп.

Обработчик события на кнопку не видит функцию
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data;.

Обработчик события не видит глобальную переменную
Здравствуйте, кучу времени потратил, чтобы найти в чем проблема, но не нашел решения. Подскажите.

Источник