Question

我正在尝试在一系列复选框上触发事件。问题是，我相信，仅仅因为我在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());
});

如何让事件发生？

Answer 1

在添加新内容后立即尝试在回调中附加事件监听器：
所以代替：$('#series-table').append(result);，尝试：

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

Answer 2

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

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

这将处理具有类名称showarray的所有元素的单击事件，即使在加载页面后动态添加也是如此。

编辑：看起来你已经有了它的工作，但为了完整起见，我修复了我的答案。 .on（）需要与有问题的元素的父元素相关联，并且被赋予处理程序的实际选择器是第二个参数。

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

2 个答案: