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

代码：

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下拉菜单。

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

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

实时示例

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

直接添加到对象的事件处理程序仅添加到该特定DOM对象。如果添加或替换更多的DOM对象，那么这些DOM对象上就不会有这些事件处理程序。您必须在创建或替换DOM对象后手动添加事件处理程序，或者必须切换到使用委托事件处理。

委托事件处理将事件处理程序附加到一个公共父对象（未被替换），并使用许多事件在父链上冒泡的事实来处理来自公共父对象的事件。这允许您自由创建或替换子元素，但仍然有一个适用于所有子对象的事件处理程序。

您可以在以下其他答案中阅读更多关于如何进行委托事件处理的信息：

jQuery.live（）与.on（）方法在加载动态html 后添加点击事件

jQuery.on（）是否适用于创建事件处理程序后添加的元素？

JQuery事件处理程序-What'；s是"；最佳"；方法

如这些参考答案所示，总体思路如下：

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

相关内容

最新更新

热门标签：