Question

好的，我正在使用getJSON请求从API获取一些数据。然后我迭代结果并用数据填充表。在'td'中我添加了一个名为'team'的类，然后有一个click功能，只需在点击这个td时切换背景颜色。当我设置一个小提琴并用数据硬编码td时，它可以工作。但当它加载到表中时，点击功能似乎没有被触发。

我已经设置了一个fiddle，它显示了当td使用某些数据进行硬编码时基本功能正常工作。

我对getJSON的js如下：

$.getJSON( "helpers.php", {
})
.done(function( rows ) {
    $.each(rows, function() {
        var row = $('<tr>');
        var teamname = $('<td>').addClass("team").html(this.team);
        var points = $('<td>').html(this.points);
        row.append(teamname, points);
        $('#table-fixtures').append(row);
    });
});

然后是点击功能的JS：

$('td.team').click( function() {    
    $(this).toggleClass('on');
});

和CSS，如小提琴：

.table-fixtures td.team.on {
  background-color: LightGreen;
}

所以，我无法解决为什么它在硬编码时有效，但在动态加载时无效。我知道这个类的工作方式就像我添加另一个类作为测试一样，它实现了该类的CSS，因此它的点击功能没有触发，但在JS控制台中没有任何内容。任何帮助表示赞赏。

Answer 1

在此上下文中尝试使用event delegation，

$(document).on('click','td.team',function() {    
    $(this).toggleClass('on');
});

请阅读here以了解有关活动授权的更多信息。

jQuery - 当从getjson加载内容时，单击函数不会触发

1 个答案: