Не работает onclick после 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

Когда я нажимаю на ссылку с классом, как он работает нормально, то же самое, когда я нажимаю на ссылку с классом в отличие. Однако это не работает, когда я нажимаю одну и ту же ссылку дважды! Когда я ищу в интернете, я вижу, что я должен использовать live вместо click, однако live версия устарела в версии 1.8. Как я могу сделать это пожары несколько раз?

4 ответа

Вам необходимо связать on с элементом, который всегда будет присутствовать. (документ или какой-нибудь основной упаковщик div). Использование on с динамическим элементом не будет работать.

Прежде чем javascript сможет работать после вызова ajax, вам необходимо снова создать новый экземпляр вашего блока кодов, например

Если вы хотите использовать on вместо live , вам нужно написать что-то вроде

Работал так же, как bind() , до того, как это устарело.

Если вы хотите, чтобы on() действовал как live() , вам нужно передать 3 аргумента, как в моем первом примере.

Метод .on () присоединяет обработчики событий к текущему выбранному набору элементов в объекте jQuery. Начиная с jQuery 1.7, метод .on () предоставляет все функциональные возможности, необходимые для подключения обработчиков событий. Для получения справки по преобразованию старых методов событий jQuery см. .bind (), . делегат () и .live ( ). Чтобы удалить события, связанные с .on (), см. .Off (). Чтобы прикрепить событие, которое запускается только один раз, а затем удаляет себя, см. .One ()

Источник

функция jQuery click не работает после вызова ajax? [дубликат]

этот вопрос уже есть ответ здесь:

функция jQuery click отлично работает здесь

но если я ставлю какой-нибудь по ajax, $(‘.deletelanguage’).click не работает.

теперь $(‘.deletelanguage’).click за последние не работает.

Примечание: CSS отлично работает здесь.

Я хочу сделать эти Недавно добавленные работа с jQuery нажмите.

7 ответов

проблема в том, что .нажмите, работает только для элементов на странице. Вы должны использовать что-то вроде on Если вы проводите вверх по будущим элементам

при использовании $(‘.deletelanguage’).click() чтобы зарегистрировать обработчик событий, он добавляет обработчик только к тем элементам, которые существуют в dom при выполнении кода

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

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

Это прикрепит ваше событие к любым якорям в #LangTable элемент, уменьшение объема необходимости проверять все document дерево элементов и повышения эффективности.

здесь скрипка

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

событие click не существует в том месте, где определено событие. Вы можете использовать live или делегировать событие.

Я тестировал простое решение, которое работает для меня! Мой javascript был в отдельном файле js. Я сделал то, что я поместил javascript для нового элемента в html, который был загружен ajax, и он отлично работает для меня! Это для тех, кто имеет большие файлы javascript!!

Источник

Onclick event doesn’t work after AJAX in JQuery issue

This is the Jquery code:

The fact is then when i save a new person and after that I want to delete that person, the onclick event on the class «delete_person» does not work. But when I refreshed the page it works. What should I do ? and all of it is included in $( document ).ready(function() < >);

4 Answers 4

.delete-person is an element that is dynamically added to the DOM after the AJAX call has been made. Since your jQuery script runs upon DOMready (when .delete-person is not present during runtime), the click event would not be bound to the element.

The line $(‘.delete-person’).on(‘click’, function() < . >); is functionally identical to $(‘.delete-person’).click(function() < . >); . The gist is that you are attaching the click event handler to the element .delete-person , which is not present in the DOM at runtime.

Instead, listen to the click event originating from .delete-person that is bubbling up to the document object instead:

What the above code does differently is that you are listening for the click even on the document object, but verifying that the click event originated from a child element that has a class of .delete-person . Since the click event will always bubble to the document regardless of whether the object is present or absent during runtime, you will be able to delete the person this way 😉

Источник

jQuery click function doesn’t work after ajax call? [duplicate]

The jQuery click function works fine here

but if I set some by ajax, $(‘.deletelanguage’).click doesn’t work.

Now the $(‘.deletelanguage’).click for the last is not working.

Note: the CSS works fine here.

I want to make these newly appended working with jQuery click.

7 Answers 7

The problem is that .click only works for elements already on the page. You have to use something like on if you are wiring up future elements

When you use $(‘.deletelanguage’).click() to register an event handler it adds the handler to only those elements which exists in the dom when the code was executed

you need to use delegation based event handlers here

Since the class is added dynamically, you need to use event delegation to register the event handler like:

This will attach your event to any anchors within the #LangTable element, reducing the scope of having to check the whole document element tree and increasing efficiency.

Here’s the FIDDLE

Same code as yours but it will work on dynamically created elements.

The click event doesn’t exist at that point where the event is defined. You can use live or delegate the event.

I tested a simple solution that works for me! My javascript was in a js separate file. What I did is that I placed the javascript for the new element into the html that was loaded with ajax, and it works fine for me! This is for those having big files of javascript!!

Источник