1

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

如何使事件触发？

4

2 回答 2

1

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

$('#series-table').append(result).find('.showarray').click(function(e) {
    console.log($(this).val());
});
于 2013-02-17T18:00:41.770 回答
0

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

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

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

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

于 2013-02-17T17:58:38.213 回答