1

在 ASP.NET 网页中，我有一个显示数据库查询结果的表。在同一页面中，我有一个向数据库添加一行并在表末尾显示该行的表单。我使用 jQuery ajax 将记录插入数据库，如果成功，则创建一个<tr> <td> ... </td> </tr>元素并使用 jQuery 将此元素附加到表中。这工作正常。现在我想让表格行可点击。我试过用 $('#table-name tr').click(function () { alert ("hello"); });

单击功能不适用于我使用表单添加的行。有什么解决方法吗？如何使所有行都可点击？

4

3 回答 3

4

$('#table-name tr')仅返回<tr>调用该选择器时存在的元素。如果您动态添加新行，则不会考虑它们。

jQuery 有特殊的语法来处理动态生成的元素：

$('#table-name').on('click', 'tr', function() {
    alert('Hello');
});
于 2012-11-19T00:49:56.167 回答
1

click 事件对这些元素不起作用的原因是事件处理程序只发出一次，在元素存在于 DOM 之前。

为了使将来添加的元素也存在单击事件，您应该使用on，这将允许将处理程序分配给动态添加的元素。确保包含'tr'将创建一个委托函数来处理未来元素的事件。

$('#table-name tr').on('click', 'tr', function () { alert ("hello"); });

另一种选择是在将元素动态添加到页面之前将点击事件分配给元素。

success: function(results){
 var newRow = document.createElement("tr");
 //manipulate newRow with results
 $(newRow).click(function(){ alert("hello") });
 //append newRow
}
于 2012-11-19T00:48:54.803 回答
1

使用 jquery on 而不是单击。问题是单击事件仅在页面加载时附加。

$('#table-name').on('click', 'tr', function() {alert('hello');});

Jquery on 方法等待事件从子元素向上传播。

于 2012-11-19T00:51:25.540 回答