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

我试图在一系列复选框上触发一个事件。问题是，我相信，只是因为我在DOM第一次加载JavaScript事件处理程序之后添加了这些复选框，所以当单击这些新复选框时，事件处理程序无法对其进行激发

这是我的代码：

//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());
});

//这将在初始加载页面后运行。
var fillSeries=函数（）{
$.getJSON（'api/series'，函数（数据）{
var结果=“”；
对于（变量i=0；i

---

如何触发事件？

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

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

这将处理类名为showarray的所有元素的单击事件，即使在加载页面后动态添加

---

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

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

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

这将处理类名为showarray的所有元素的单击事件，即使在加载页面后动态添加

---

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

在添加新内容之后，尝试在回调中附加事件侦听器：
因此，与此相反：

$（'#series table'）.append（result），请尝试：

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

在附加新内容之后，尝试在回调中附加事件侦听器：

因此，与此相反：
$（'#series table'）.append（result），请尝试：

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

$（“#系列表”）。在（'click'，'.showarray'，function（）{…}）上再次执行
<代码>$（“#系列表”）。在（'click'，'.showarray'，function（）{…}）上再次
！！！！嗯，这对我真的不管用：/嗯，这对我真的不管用：/谢谢，这很管用。我之前试着在后面加上它，但我做错了：）谢谢，这很好用。我试图在之前添加它，但我做错了：）