Событие Click не работает с динамически сгенерированными элементами

    $(document).ready(function() { $("button").click(function() { $("h2").html("

click me

") }); $(".test").click(function(){ alert(); }); });

Я пытался создать новый тег с test имени classа в

, нажав кнопку. Я также определил событие click, связанное с test . Но событие не работает.

Может ли кто-нибудь помочь?

Связывание click() вы используете, называется «прямой» привязкой, которая привязывает обработчик только к уже существующим элементам. Он не будет привязан к элементам, созданным в будущем. Для этого вам нужно будет создать «делегированное» привязку, используя on() .

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

Источник

Вот что вы ищете:

 var counter = 0; $("button").click(function() { $("h2").append("

click me " + (++counter) + "

") }); // With on(): $("h2").on("click", "p.test", function(){ alert($(this).text()); });
  

Использовать метод .on() с делегированными событиями

 $('#staticParent').on('click', '.dynamicElement', function() { // Do something on an existent or future .dynamicElement }); 

Метод .on() позволяет вам делегировать любой желаемый обработчик события:
текущие элементы или будущие элементы, добавленные в DOM позднее.

PS: Не используйте .live() ! Из jQuery 1.7+ метод .live() устарел.

Причина:

В jQuery Click () – прикрепляет обработчик событий только в том случае, если элемент уже существует в html-коде.

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

Динамические элементы создаются с помощью javascript или jquery (не в html) .

Таким образом, событие click не срабатывает.

Решение :

Чтобы преодолеть это, мы должны использовать функцию () .

Функции delegate (), live () и on () имеют преимущества перед элементами DOM.

on может запускать как существующие элементы, так и будущие элементы.

on может рассматривать элементы, которые все присутствуют на всей странице.

Функции delegate (), live () устарели (не используйте их).

Вы должны использовать функцию для запуска события на динамически созданных (будущих) элементах.

Удалите код из $ (document) .ready:

 $(".test").click(function(){ alert(); }); 

Изменить на:

 $(document).on('click','.test',function(){ alert('Clicked'); }); 

+ Изменить

  $(".test").click(function(){ 

к

  $(".test").live('click', function(){ 

LIVE DEMO

jQuery .live()

Для этого вам нужно использовать .live :

 $(".test").live("click", function(){ alert(); }); 

или если вы используете jquery 1.7+, используйте .on :

 $(".test").on("click", "p", function(){ alert(); }); 

Добавьте эту функцию в файл js. Он будет работать в каждом браузере

 $(function() { $(document).on("click", '#mydiv', function() { alert("You have just clicked on "); }); }); 
  
Div

Попробуйте .live() или .delegate()

http://api.jquery.com/live/

http://api.jquery.com/delegate/

Элемент .test был добавлен после .click() , поэтому у него не было привязанного к нему события. Live и Delegate придают этому событию триггер родительским элементам, которые проверяют своих детей, поэтому все, что добавлено впоследствии, все еще работает. Я думаю, что Live проверит весь документ, а делегат может быть передан элементу, поэтому делегирование будет более эффективным.

Больше информации:

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

Я нашел два решения в документации jQuery:

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

Например:

  $("body").delegate('.test', 'click', function(){ ... alert('test'); }); 

Зачем?

Ответ. Прикрепите обработчик к одному или нескольким событиям для всех элементов, которые соответствуют селектору, сейчас или в будущем, на основе определенного набора корневых элементов. ссылка: http://api.jquery.com/delegate/

Второе: поместите свою функцию в «$ (document)» , используя «on» и присоедините ее к элементу, который вы хотите вызвать. Первым параметром является «обработчик событий», второй: элемент и третий: функция. Например:

  $( document ).on( 'click', '.test', function () { ... alert('test'); }); 

Зачем?

Ответ. Обработчики событий привязаны только к выбранным в данный момент элементам; они должны существовать на странице в момент, когда ваш код выполняет вызов .on () . Чтобы убедиться, что элементы присутствуют и могут быть выбраны, выполните привязку событий внутри обработчика документа для элементов, которые находятся в разметке HTML на странице. Если на страницу вводится новый HTML-код, выберите элементы и присоедините обработчики событий после того, как новый HTML будет помещен на страницу. Или используйте делегированные события для присоединения обработчика событий, как описано далее … link: https://api.jquery.com/on/

Лучший способ применить событие к динамически создаваемому контенту с помощью делегирования.

 $(document).on("eventname","selector",function(){ // code goes here }); 

поэтому ваш код выглядит так

 $(document).on("click",".test",function(){ // code goes here }); 
 $(.surrounding_div_class).on( 'click', '.test', function () { alert( 'WORKS!' ); }); 

Будет работать только в том случае, если DIV с classом .surrounding_div_class является непосредственным родителем объекта .test

Если в div будет другой объект, который будет заполнен, он не будет работать.

Проблема заключается в том, что вы пытаетесь связать class «test» с событием, прежде чем что-либо будет иметь «тестовый» class в DOM . Хотя может показаться, что все это динамично, что происходит на самом деле, JQuery делает пропуск через DOM и подключает событие click, когда функция ready() запускается, что происходит до того, как вы создали «Click Me» в событии вашей кнопки ,

Добавив событие «test» Click в обработчик кликов «button», он подключится к нему после того, как в DOM будет существовать правильный элемент.

  

Использование live() (как указывали другие) – это еще один способ сделать это, но я также подумал, что было бы неплохо указать на незначительную ошибку в вашем JS-коде. То, что вы написали, было не так, просто нужно было быть правильно охвачено. Удовольствие от работы DOM и JS – одна из сложнейших вещей, которые многие традиционные разработчики обертывают вокруг.

live() – это более чистый способ справиться с этим, и в большинстве случаев это правильный путь. Это, по сути, наблюдение за DOM и повторное подключение вещей, когда элементы внутри него меняются.

.live отлично работает.

Это для динамически добавленных элементов на сцену.

 $('#selectAllAssetTypes').live('click', function(event){ alert("BUTTON CLICKED"); $('.assetTypeCheckBox').attr('checked', true); }); 

Привет, Анкит.

JQuery .on работает нормально, но у меня были некоторые проблемы с рендерингом, реализующим некоторые из вышеперечисленных решений. Моя проблема с использованием .on заключается в том, что каким-то образом она отображала события по-другому, чем метод .hover .

Просто fyi для всех, у кого может возникнуть проблема. Я решил проблему, перерегистрировав событие наведения для динамически добавленного элемента:

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

 $('#someID div:last').hover( function() { //... }, function() { //... } ); 

Я не мог жить или делегировать работу над div в лайтбокс (tinybox).

Я использовал setTimeout успешно, следующим простым способом:

 $('#displayContact').click(function() { TINY.box.show({html:'
Submit
', close:true}); setTimeout(setContactClick, 1000); }) function setContactClick() { $('#contactSubmit').click(function() { alert($('#contactText').val()); }) }

Также вы можете использовать onclick="do_something(this)" внутри элемента

Альтернативной и более сжатой альтернативой (IMHO) является использование сырой функции javascript, которая реагирует на событие on click, а затем передает целевой элемент обратно в jQuery, если хотите. Преимущество этого подхода заключается в том, что вы можете динамически добавлять свой элемент в любом месте, а обработчик кликов будет «работать», и вам не нужно заниматься делегированием элемента управления родительским элементам и т. Д.

Шаг 1. Обновите динамический html, чтобы запустить событие onclick. Не забудьте передать объект «событие» в качестве аргумента

     $ («кнопка»). click (function () {
         $ ("h2"). html ("

onclick = 'test (event)' > click me ") });

Шаг 2. Создайте тестовую функцию для ответа на событие click

     функциональный тест (e) {
         предупреждение ();
     });

Необязательный Шаг 3: Учитывая, что вы используете jQuery, я предполагаю, что будет полезно вернуть ссылку на кнопку источника

     функциональный тест (e) {
         предупреждение ();

         // Получить ссылку на кнопку
         // Объяснение этой строки доступно здесь.
         var target = (e.target)?  e.target: e.srcElement;

         // Передаем ссылку на кнопку jQuery для создания jQuery magic
         var $ btn = $ (target);

     });

Я работаю с таблицами, динамически добавляя им новые элементы, и при использовании on () единственный способ сделать это работает для меня – использовать нединамический родитель:

  // Dynamically created  // Dynamically created  // Dynamically created 

Это действительно полезно, потому что для удаления событий, связанных с функцией on () , вы можете использовать off () , а для использования событий один раз вы можете использовать one () .

Вы можете добавить на клик динамически создаваемые элементы. Пример ниже. Использование команды «Когда», чтобы убедиться в ее выполнении. В моем примере я захватываю div с расширением classа, добавляя пробел «нажимаем, чтобы увидеть больше», затем используя этот интервал, чтобы скрыть / показать оригинальный div.

 $.when($(".expand").before("Click to see more")).then(function(){ $(".clickActivate").click(function(){ $(this).next().toggle(); }) }); 

Если у вас есть динамически добавленная ссылка на какой-либо контейнер или тело:

 var newLink= $("", { "id": "approve-ctrl", "href": "#approve", "class": "status-ctrl", "data-attributes": "DATA" }).html("Its ok").appendTo(document.body); 

вы можете взять свой необработанный элемент javascript и добавить к нему прослушиватель событий, например, щелчок :

 newLink.get(0).addEventListener("click", doActionFunction); 

Независимо от того, сколько раз вы добавляете этот новый экземпляр ссылки, вы можете использовать его так, как если бы вы использовали функцию jquery click .

 function doActionFunction(e) { e.preventDefault(); e.stopPropagation(); alert($(this).html()); } 

Итак, вы получите сообщение о том, что

Все нормально

Он имеет лучшую производительность, чем другие альтернативы.

Дополнительно : вы можете получить лучшую производительность, избегая jquery и используя простой javascript. Если вы используете IE до версии 8, вы должны использовать этот полипол для использования метода addEventListener

 if (typeof Element.prototype.addEventListener === 'undefined') { Element.prototype.addEventListener = function (e, callback) { e = 'on' + e; return this.attachEvent(e, callback); }; } 

Используйте «on», поскольку щелчок получает привязку к уже присутствующим элементам.

Например, для

 $('test').on('click',function(){ alert('Test'); }) 

Это поможет.

  • Как можно удалить все обработчики событий события «Click» кнопки «Button»?
  • Когда происходит событие «размытия», как я могу узнать, какой элемент фокуса пошел * на *?
  • Как использовать GWT EventBus
  • .NET Events - Что такое отправитель объекта и EventArgs?
  • Пользовательские события GWT
  • Отслеживание положения прокрутки и уведомление об этом других компонентах
  • iOS - нажимать вперед все
  • Глобальный захват клавиатуры в приложении C #
  • Как я могу вызвать событие рисования?
  • Передача данных между формами WinForms
  • Как получить подписчиков мероприятия?
  • Давайте будем гением компьютера.