javascript - 动态添加的复选框不会触发事件

Question

使用phonegap和javascript

我有一个动态创建的 UL 列表，其中有两个复选框。如果我手动添加 LI 项目，那么单击功能就可以正常工作。

但是当我动态添加我的 li 项目时，单击功能不会触发。

//This is the code that I use to populate the UL list

if (records[r_key].name.indexOf("#") == -1) {
    $('#ItemSelection').append('<li><p class="name">' + records[r_key].name +'</p><input type="checkbox" id="w' + records[r_key].id +'" class="markedplayer"><input type="checkbox" id="s' + records[r_key].id + '" class="markedwinner"></li>');
}

//This is the code to do something when any box is checked
$(":checkbox").click(function() {
    if (this.checked){
    //do something
    } else {
        //something else if not checked    
    } 
});

Answer 1

更改为on并创建委托(delegate)事件:

$("#ContainerID}").on('click', ':checkbox', function(){

其中ContainerID是静态父级的ID(最好是最接近复选框的)

在您的情况下，容器看起来像是#ItemSelection

委托(delegate)事件的优点是即使在动态插入的元素上也可以触发。