事件停止工作後的動態UL李改變

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){ 

}); 

實時例如

$("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 
});