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

Posted 2023-03-05

【中文标题】动态添加的表行不会触发 Click 事件

【英文标题】：Click event doesn't fire for table rows added dynamically

【发布时间】：2012-10-14 08:56:10

【问题描述】：

我有一个空表，我通过 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);
);

什么都没有发生。

【参考方案1】：

你需要event delegation你可以使用on来绑定动态添加元素的点击事件。 您通过点击绑定的方式将适用于现有元素，但不适用于以后添加的元素。

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

你可以限制on 的范围，方法是通过 id 或父类提供最近的父选择器。

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

Delegated events

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

【讨论】：

FWIW，我不建议使用 document 或 body 作为父选择器，因为它会使事件反应变慢。最好使用最近的静态父级。

感谢您的回答。我花了几个小时来解决类似的问题

终于，有人回答了我正在寻找的问题。我遇到了完全相同的问题。

【参考方案2】：

你必须使用.on方法

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

【讨论】：

我认为这是一个比公认的更好的答案，因为它锁定了@VisioN 提到的最近的 static 父级。

【参考方案3】：

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

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

【参考方案4】：

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

【讨论】：

虽然欢迎使用此代码 sn-p，并且可能会提供一些帮助，但它会是 greatly improved if it included an explanation of 如何解决这个问题。没有它，你的答案就没有多大的教育价值了——记住你是在为将来的读者回答这个问题，而不仅仅是现在问的人！请edit您的答案添加解释，并说明适用的限制和假设。