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

您需要event delegation，您可以使用 on 为动态添加的元素绑定click事件。 您使用click绑定的方式将适用于现有元素，但不适用于稍后添加的元素。

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

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

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

<强> Delegated events

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序。

Answer 2

您必须使用.on方法

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

Answer 3

将事件绑定到现有后，动态添加行。您可以使用delegated event approach来解决问题：

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

Answer 4

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

对于动态添加的表行，不会触发Click事件

4 个答案: