使用jQuery使表行可单击

Question

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

单击函数不适用于我使用表单添加的行。有什么变通方法吗？如何才能使所有行都可单击？

Answer 1

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

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

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

Answer 2

单击事件对这些元素无效的原因是，在DOM上存在这些元素之前，事件处理程序只发出了一次。

为了让click事件存在于将来添加的元素中，您应该使用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
}

Answer 3

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

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

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