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

Question

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

此代码有效：

$("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 中已弃用，那么我用什么来替换？在动态复选框上捕获更改事件的好方法是什么？

Answer 1

1st event 是 form 上的 bound 并且 change 在匹配的任何子元素上执行selector。因此，如果您在其中添加任何动态元素，它们将被捕获。

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

编辑

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

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

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

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

});

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

Answer 2

document 是容器并被视为 DOM.

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

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

进一步规范，

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

到达那里

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

Jquery bind change don't work on dynamic content