使用jQuery使表行可单击

时间:2012-11-19 00:47:00

标签: jquery

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

点击功能对我使用表单添加的行不起作用。有没有解决方法?如何使所有行都可以点击?

3 个答案:

答案 0 :(得分:3)

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

jQuery具有处理动态生成元素的特殊语法:

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

答案 1 :(得分:1)

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

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

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

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

success: function(results){
 var newRow = document.createElement("tr");
 //manipulate newRow with results
 $(newRow).click(function(){ alert("hello") });
 //append newRow
}

答案 2 :(得分:0)

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

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

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