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

Question

Кодекс:

if($('.info-dropdown').length){ 
     setTimeout(function(){ 
      $('li').has('input[type="checkbox"]').on('click', function(){ 
       $(this).find('.brand-checkbox').parent().toggleClass('active'); 
      }); 
     }, 10); 
    } 

Проблема: Этот код определяет события, нажмите на элемент checkbox. После динамического изменения этого ul li событие перестает работать.

Примечание: Эти флажки из bootstrap выпадающего меню.

Answer 1

Чтобы связать событие для динамического HTML, Вы можете следовать следующим кодом:

$('containerSelector').on('eventName', 'mainElementSelector' function(e){ 

}); 

Realtime пример

$("ul").on("click", "li:has(:checkbox)", function(){ 

}); 

Answer 2

Обработчики событий, добавленные непосредственно к объекту, добавляются только к этому конкретному объекту DOM. Если вы затем добавите или замените больше объектов DOM, у этих объектов DOM не будет ни одного из этих обработчиков событий. Вам придется либо вручную добавить обработчики событий после создания или замены объектов DOM, либо вам придется переключиться на использование делегированной обработки событий.

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

Вы можете прочитать намного больше о том, как сделать делегированных обработки в этих других ответах событие:

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

JQuery Event Handlers - What's the "Best" method

Как показано в этих ссылочных ответов, общее идея такова:

$("#staticParentSelector").on("click", ".selectorForDynamicChildren", function(e) { 
    // event handler code here 
});