Question

我有一个示例here，其中包含动态添加行的表。每一行都应触发事件：

  $("#tblTest > tbody > tr").on("click", function(e){    
    alert();        
  });

此代码不适用于动态添加的行。有什么问题？

Answer 1

在创建时将点击添加到tr。您需要将点击攻击到tbody然后过滤到tr。

  $("#tblTest > tbody").on("click", "tr", function(e){    
    alert();        
  });

Answer 2

试试这样..

$(function() {
  $(document).on("click", "#tblTest > tbody > tr", function(e) {
    alert();
  });
});

Answer 3

您应该更改代码以使用Body作为.on事件：

  $("body").on("click", "#tblTest > tbody > tr", function(e){    
    alert();        
  });

Answer 4

对于使用dinamically添加的元素，您需要使用 event delegation ：

$(document).on("click", "#tblTest > tbody > tr", function(e){    
    alert('test');        
  });

更新了 Codepen 。

Answer 5

动态添加行时，必须将新的onClick侦听器绑定到添加的元素。您的代码仅将侦听器添加到页面上已有的元素;不是新创建的元素。像这样的东西可以正常工作：

var AddRow = function(){
     // add element
     $("#tblTest > tbody").append("<tr><td>Test name</td><td>Last anme</td></tr>");
     // add listener to new element
     $("#tblTest > tbody > tr:last-of-type").on("click", function(e){    
          alert();        
     });
}

：last-of-type伪相选择器是避免将多个侦听器绑定到单元格的关键。

Answer 6

您可以使用事件委派。

 $(document).off('click.namespace').on('click.namespace', '#tblTest > tbody > tr', function (e) {
alert();           
  });

它将重新绑定事件。因此动态附加的行也与事件绑定。

表格动态添加的行未触发事件

6 个答案: