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

直接添加到对象的事件处理程序仅添加到该特定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
});

Answer 2

要为动态HTML绑定事件，您可以按照以下代码进行操作：

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

});

实时示例

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

});

动态ul li更改后，事件停止工作

2 个答案: