DOM加载后添加的复选框上的复选框单击事件

我想在复选框数组上激发一个事件。问题是，我相信，仅仅因为在DOM第一次加载JavaScript事件处理程序后添加了这些复选框，事件处理程序在单击它们时无法触发这些新复选框。DOM加载后添加的复选框上的复选框单击事件

这是我的代码：

//this runs after the initial load of the page. 
var fillSeries = function() { 
    $.getJSON('api/series', function(data) { 
    var result = ''; 
    for(var i = 0; i < data.length; i++) { 

     //the first result is structure. 
     if(i == 0) 
      continue; 

     var tablerow = '<tr><td><input type="checkbox" class="showarray" value="'+ data[i].id +'" /> ' + data[i].title + '</td></tr>'; 
     result += tablerow; 
    } 
    $('#series-table').append(result); 
    // remove the loading icon and text 
    $('#loading').remove(); 
}); 
} 
// checkbox onclick listener 
$('.showarray').click(function() { 
    console.log($(this).val()); 
});

我怎样才能使事件火？

来源

2013-02-17 Ms01

'$（ '＃系列表'）上（。 'click'，'.showarray'，function（）{...}）''再次!!!! – adeneo 2013-02-17 17:57:32

尝试连接您的回调中的事件侦听器，追加新的内容之后：
所以不是这样的：$('#series-table').append(result);，尝试：

$('#series-table').append(result).find('.showarray').click(function(e) { 
    console.log($(this).val()); 
});

来源

2013-02-17 18:00:41

谢谢，这个作品很棒。我试图在之前添加它，但我做错了:) – Ms01 2013-02-17 18:03:53

如果这是正确的，问题是元素被动态地添加到页面加载后的DOM的结果，请尝试使用：

$(document).on('click', '.showarray', function() { 
    console.log($(this).val()); 
});

这将处理单击所有元素的事件与showarray的类名，甚至如果在页面加载后动态添加。

编辑：看起来你已经得到了它的工作，但我为了完整性而修复了我的答案。 .on（）需要与一个父元素关联到正在讨论的元素，而实际选择器被分配给处理程序的是第二个参数。

来源

2013-02-17 17:58:38 squeezebox

嗯这不适合我：/ – Ms01 2013-02-17 18:02:27

DOM加载后添加的复选框上的复选框单击事件

回答

相关问题