jquery - 动态添加的表行不会触发 Click 事件

Question

我有一个空表，我使用以下方法通过 jQuery 添加行：

$('#table > tbody:last').append('<tr id="' + symbol.Code1 + '"><td>' + symbol.Code1 + '</td><td>' + symbol.Code2+ '</td><td>' + symbol.Code3+ '</td></tr>');

一切都很好，但是当我实施时：

$("#table tr").click(function(e) {
    alert(this.id);
});

没发生什么事。

Answer 1

您需要事件委托，您可以使用它来为动态添加的元素绑定 click 事件。您通过单击绑定的方式将应用于现有元素，但不适用于稍后添加的元素。

$(document).on("click", "#table tr", function(e) {
    alert(this.id);
});

您可以on通过 id 或父类提供最接近的父选择器来限制范围。

$('.ParentElementClass').on("click", "#table tr", function(e) {
    alert(this.id);
});

委托活动

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。

Answer 2

你必须使用.on方法

$("#table").on('click','tr',function(e) { 
    alert($(this).attr('id')); 
}); 

Answer 3

在将事件绑定到现有事件后动态添加行。您可以使用委托事件方法来解决问题：

$("#table").on("click", "tr", function(e) {
    alert(this.id);
});

Answer 4

$(document).on('click', "#tbl-body tr td", function(e) { 
    alert(this.id);
});