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并进行委托事件：

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

静态父级的 id在哪里ContainerID（最好是最接近复选框）

看起来在你的情况下容器是#ItemSelection

即使在动态插入的元素上，委托事件也具有触发的优势。

Answer 2

因为您甚至需要将点击重新附加到新项目。单击事件不会神奇地知道您添加了任何新内容。

监听 ul 上的点击事件，你不必担心重新附加事件。

$("#ItemSelection").on("click", "input[type='checkbox']", function(){
    if (this.checked){
        //do something
    } else {
        //something else if not checked    
    } 
});

Answer 3

该选择器仅在加载 DOM 时触发一次。要使其对添加到 DOM 的每个元素起作用，您需要使用以下on方法：

$(container).on('click', ':checkbox', function(){
    if (this.checked){
      //do something
    } else {
      //something else if not checked    
    }
});