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中不推荐使用bind函数所以我用什么来替换？在动态复选框上捕获更改事件的好方法是什么？

Answer 1

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

第二 DOM与执行selector时<ul id='topMenu'> <li></li> </ul>中当前存在的元素相匹配。因此，任何新元素都会不被选中。

编辑

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

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

});

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

$(document).on('click', '...

许多人只会坚持使用DOM $stmt->bind_param("s", $businessPark);，但我希望保持代码清晰明确，以便始终选择尽可能低的父容器

Answer 2

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中。