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(){

其中ContainerID是静态父级的id（最好是与复选框最接近）

在您的情况下，容器似乎是#ItemSelection

即使对动态插入元素，委托事件也有优势。

Answer 2

因为您需要将点击重新连接到新项目。点击事件并不神奇地知道您添加了任何新内容。

听取ul上的click事件，您不必担心重新附加事件。

$("#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    
    }
});

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

3 个答案: