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

Question

我这里有一个动态添加行的表格示例。每一行都应触发事件：

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

此代码不适用于动态添加的行。问题出在哪里？

Answer 1

它在创建时将单击添加到 tr。 您需要改为攻击对tbody的点击，然后过滤到tr。

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

Answer 2

您应该更改代码以使用 .on 事件的 body：

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

Answer 3

动态添加行时，必须将新的 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 4

对于动态添加的元素，您需要使用事件委派：

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

更新了代码笔。

Answer 5

像这样尝试。

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

Answer 6

您可以使用事件委派。

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

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