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

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

$('#table > tbody:last').append('' + symbol.Code1 + '' + symbol.Code2+ '' + symbol.Code3+ ''); 

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

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

什么都没发生。

Answer 1

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

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

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

 $('.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); });