对于动态添加的表行,不会触发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')); 
});