jquery动态添加复选框不能与change()函数一起使用

Question

我动态加载了几个带有标签和复选框的li到另一个可见的ul.我设置复选框被检查="已检查",我试图触发一个事件,当我更改这些动态插入复选框但没有任何事情发生.

这是jquery:

$(".otherProductCheckbox:checkbox").change( function(){
    alert('test');
});

这是动态添加的li的html:

<li class="otherProduct"><input type="checkbox" class="otherProductCheckbox radioCheck" checked="checked"/><label>Product Name</label></li>

知道为什么我不能在复选框更改其检查状态时发生警报？

Answer 1

您必须使用liveQuery或live将事件绑定到动态添加的元素.

$(".otherProductCheckbox:checkbox").live('change', function(){
    alert('test');
});

编辑 要在IE中工作,您必须使用点击而不是更改

$(".otherProductCheckbox:checkbox").live('click', function(){
        alert('test');
 });

Answer 2

由于live()现在从jQuery 1.7开始被弃用,我想我会在同一个问题上发布对我有用的解决方案(动态添加复选框时更改的触发事件).

$(document).on('click', '.otherProductCheckbox', function() {
    alert('test');
});