jquery - 将 .change 事件分配给页面加载后创建的复选框

Question

我有一个包含下拉列表的页面，当用户从列表中选择一个选项时，会触发 ajax 调用并创建一系列复选框。有的检查，有的不检查。我需要记录是否对复选框进行了任何更改，即选中/未选中。我尝试使用以下内容，但没有任何反应。

顺便说一句，我使用的是 jQuery 版本 1.7.1。

$("input:checkbox").change(function(){ 
    //some stuff happens
});

我那里有警报，但什么也没发生。所以我尝试将它包装在 $(document).ready(... 中，但同样什么也没有。所以我的猜测是，因为当 DOM 准备好时它们还没有创建复选框，所以它没有可以附加该操作的标签。

所以现在我很茫然。我不确定，如果不将 onChange="someFunction()" 放入

.append("<input type='checkbox' id='" + theData.DATA + "' value='" + theData.DATA + "'>" + tempName + "<br />");

这实际上是在创建复选框。

有什么想法吗？

Answer 1

你是对的，如果你使用的是 jQuery 1.7.. 使用 .on如下语法，

$(<closest_checkbox_container>).on('change', 'input:checkbox', function(){ 
    //some stuff happens
});

如果您使用的是旧版本，请使用 .delegate ,

$(<closest_checkbox_container>).delegate('input:checkbox', 'change', function(){ 
    //some stuff happens
});

注意:其中<closest_checkbox_container>是 DOM 准备就绪时可用的最接近的复选框容器。

上面的方法调用为delegated events 。 Ref (阅读委托(delegate)事件下的部分)

或者，最好写 $("input:checkbox").change(function(){添加完这些复选框后。但是，最好假设所有复选框仅添加一次。