Jquery绑定更改不适用于动态内容答案

【问题标题】：Jquery bind change don't work on dynamic contentJquery绑定更改不适用于动态内容
【发布时间】：2016-10-27 08:50:20
【问题描述】：

我想在动态输入复选框元素上绑定一个更改事件，但这很奇怪......

此代码有效：

$("form").on('change', 'input:checkbox.checkbox_main', function () {
            console.log('change ok');
        });

这个不行：

$('input:checkbox.checkbox_main').on('change', function () {
            console.log('change ok');
        });

谁能解释一下为什么？

我到处都读到在 jquery v3.1 中不推荐使用绑定函数，那么我用什么来替换？在动态复选框上捕获更改事件的好方法是什么？

【问题讨论】：

【解决方案1】：

document 是容器，被视为 DOM。

当您尝试访问 $('input:checkbox.checkbox_main').on('change') 时，它将无法正常工作，因为 jQuery 无法识别在 document.ready 时可用的 HTML 元素。

$("form").on('change', 'input:checkbox.checkbox_main' 这会将事件动态绑定到特定元素的容器。

进一步说明，

$('body') 以<body> html 元素为目标，而$(document) 以整个html 文档为目标。这意味着如果您想引用 <head> 元素中的某些内容，您希望通过 $(document) 到达那里。

仅供参考，我假设 input:checkbox.checkbox_main 元素是动态添加到 DOM 中的。

【讨论】：

【解决方案2】：

第一个event是form上的bound，change在匹配selector的任何子元素上执行。因此，如果您在其中添加任何动态元素，它们就会被捕获。

2nd event 匹配在执行selector 时DOM 中当前存在的元素。因此，任何新元素都将不会被拾取。

编辑

如果你有这样的动态菜单：

<ul id='topMenu'>
   <li></li>
</ul>

并且您想在其子级上绑定任何事件（包括所有可能的事件）我会这样做：

$('#topMenu').on('click', 'li', function() {

});

很多人会坚持使用 DOM $(document).on('click', '...，但我喜欢保持我的代码清晰准确，所以我总是选择尽可能低的父容器

【讨论】：

那么如何正确替换绑定事件呢？第一个例子？
@arno - 这取决于您的页面上哪个element 是静态。我总是找到最低的父容器并将其子容器的事件绑定到它。很多人总是使用DOM，但我试着比这更聪明。