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

I have an empty table to which I'm adding rows via jQuery using:

我有一个空表,我通过jQuery添加行使用:

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

Everything is OK but when I implement:

一切都好,但是当我实施时:

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

nothing happens.

4 个解决方案

#1

You need event delegation you can use on to bind the click event for dynamically added elements. The way you are binding with click will apply on existing element but not elements which are added later.

您需要使用事件委派来绑定click事件以动态添加元素。使用click绑定的方式将应用于现有元素,但不适用于稍后添加的元素。

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

You can limit the scope for on by giving closest parent selector either by id or by class of parent.

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

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

Delegated events

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

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

#2

You have to use the .on method

你必须使用.on方法

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

#3

You add rows dynamically after you have bound the event to the existing ones. You may use delegated event approach to fix the problem:

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

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

#4

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

#1