Jquery почему после load скрипт не работает

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

Источник

на jQuery.вызов load () не выполняет JavaScript в загруженном HTML-файле

это, кажется, проблема, связанная только с Safari. Я пробовал 4 на Mac и 3 на Windows, и мне все еще не повезло.

Я пытаюсь загрузить внешний HTML-файл и выполнить встроенный JavaScript.

код, который я пытаюсь использовать это:

trackingCode.html выглядит так (просто сейчас, но будет расширяться один раз/если я получу эту работу):

Я вижу как сообщения в IE (6 & 7) и Firefox (2 & 3). Тем не менее, я не могу видеть сообщения в Safari (последний браузер, с которым мне нужно иметь дело — требования к проекту — пожалуйста, не flame wars).

любые мысли о том, почему Safari игнорирует JavaScript в ?

в конце концов, я хотел бы иметь возможность передавать объекты JavaScript этому trackingCode.html файл, который будет использоваться в вызове jQuery ready, но я хотел бы убедиться, что это возможно во всех браузерах, прежде чем я пойду по этому пути.

11 ответов

вы загружаете всю HTML-страницу в div, включая теги html, head и body. Что произойдет, если вы выполните загрузку и просто получите сценарий открытия, сценарий закрытия и код JavaScript в HTML, который вы загружаете?

вот страница драйвера:

вот содержимое trackingCode.HTML-код:

это работает для меня в Safari 4.

Update: добавлено пространство имен DOCTYPE и html в соответствии с кодом моего теста окружающая среда. Протестировано с Firefox 3.6.13 и пример кода работает.

другая версия решение Джона пика как раз перед этим, это отлично работает для меня:

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

url — строка, содержащая URL-адрес, на который отправляется запрос.

success(data, textStatus) — функция обратного вызова, который выполняется, если запрос выполняется успешно.

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

Я смотрю на firebug DOM, и нет никакого узла скрипта вообще, только HTML и мой узел CSS.

кто-нибудь сталкивался с этим?

вы почти поняли. Скажите jquery, что вы хотите загрузить только скрипт:

тест с этим в trackingCode.HTML-код:

Я попытался сделать один плагин jquery для функции загрузки html. Пожалуйста, обратитесь по следующей ссылке.

пожалуйста, предложите мне его еще улучшить.

Ну, у меня была та же проблема, что и для Firefox, и я не мог использовать другую команду JQuery, кроме как .load () так как я изменял интерфейс на exisitng PHP-файлах.

в любом случае, после использования .команда load (), я встроил свой скрипт JQuery во внешний HTML, который загружался, и он, казалось, работал. Я не понимаю, почему JS, который я загрузил в верхней части основного документа, не работал для нового контента.

я смог исправить эту проблему, изменив $(document).ready() до window.onLoad() .

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

это оказалось проблемой с использованием .html () для отображения индикатора ожидания, а затем цепочки.нагрузки() после него.

когда я сделал их отдельные вызовы, мои встроенные скрипты загружались каждый раз, как ожидалось.

для дальнейшего исследования обратите внимание, что существует две версии .load ()

Источник

Почему при подгрузке html через .load() отваливаются js скрипты?

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

При этом отваливаются js скрипты, работающие в этих блоках.
Как это исправить?

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

подгружай их перед остальными скриптами

Инициализацию обработчиков надо вынести в отдельную функцию, и вызывать её при каждой догрузке контента. Чтобы не инициализировать обработчики по нескольку раз на тех же элементах, внутри функции следует работать с элементами только в текущем контейнере.

Источник

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

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

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

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

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

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

Источник

Частые ошибки новичков при работе с jQuery

На разного рода форумах, я встречал и встречаю однотипные ошибки, которые допускают новички при работе с библиотекой jQuery и из-за которых их код работает не правильно или вообще не работает. Поэтому, я решил написать статью-шпаргалку, которая поможет исправить свои недочеты самостоятельно или избежать ошибок в будущем.

Консоль должна быть открыта. Закрытая консоль, конечно же, не ошибка в коде, однако, ошибочный подход во время отладки сценария. Именно консоль поможет быстро сориентироваться в том, где и какая допущена ошибка, а также следить за ходом выполнения сценария. Во всех современных браузерах — этот инструмент присутствует по умолчанию. Например, в FireFox консоль можно вызвать с помощью сочетания клавиш Ctrl + Shift + K или «Меню» > «Разработка» > «Веб-консоль«. В Chrome вызывается сочетанием клавиш Ctrl + Shift + J или «Меню» > «Дополнительные инструменты» > «Консоль JavaScript«. В Opera — сочетание клавиш аналогичны Chrome, вызов из меню — «Инструменты разработчика» > «Веб-инспектор» («Инструменты разработчика» предварительно включить в пункте «Другие инструменты»). Кроме того, существуют инструменты/аддоны, как, например, замечательный FireBug под FireFox или Web Developer для Chrome и этот же инструмент для FireFox

Не подключена библиотека. У кого-то этот пункт вызовет улыбку, но могу вас уверить, что по моей личной статистике, как минимум раз в месяц, на форуме появляется вопрос о том, почему ничего не работает, а после долгих выяснений оказывается, что js-файл с библиотекой просто не подключен на странице. Библиотека jQuery должна быть по возможности новее, подключена первой, до скриптов, в которых она используется и в единственном числе. Если вы используете какой-нибудь старенький плагин, которому для работы требуется такая же старая версия jQuery, то есть несколько нормальных путей решения, чем подключение на страницу и новой библиотеки и старой для плагина:

1. Оставляем одну новую библиотеку и сразу после неё подключаем плагин jQuery Migrate, который, в большинстве случаев, помогает решить вопрос совместимости.
2. Без каких-либо дополнений, сами заменяем в плагине удаленные методы на их современные аналоги. Обычно, это такие устаревшие или удаленные методы, как live(), $.browser и т.д.
3. И конечно же, можно найти современный аналог плагина, который вам понравился. Не зацикливайтесь на одном.

Ну, и примерный порядок подключения:

Код не обернут в конструкцию DOM-Ready. Одна из наиболее популярных ошибок. Если ваш скрипт расположен/подключен в теге , то его нужно обязательно заключить в такой код:

Это так называемый «обработчик готовности дерева DOM«. Попробую «на пальца» и простым языком объяснить, что это и зачем нужно. Браузер загружает страницу, начиная с первого на ней элемента и движется вниз. Всё, что подключено в теге : CSS, JS и т.д., загрузится и начнёт выполняться раньше, чем дело дойдёт до элементов, которые находятся в . Поэтому, при обращении к элементу из JS-кода, его еще попросту нет на странице. А обёртка, которую я показал выше, откладывает выполнение сценария до тех пор, пока вся структура страницы не будет загружена браузером полностью. Как вариант, который совсем не лишён логики и даже рекомендуется тем же Google, весь свой код можно расположить в конце страницы, перед закрывающим тегом

Источник