javascript - 动态将可点击的行添加到表

我正在尝试使用可单击的JavaScript将行添加到HTML中的表中。

这是我的代码：

HTML：

<table border="1" id="example" style="cursor: pointer;">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
</table>

JavaScript：

//clicked function
$('#example').find('tr').click( function(){
    alert('You clicked row '+ ($(this).index()) );
});

//add new row
var x=document.getElementById('example');
var new_row = x.rows[0].cloneNode(true);
new_row.cells[0].innerHTML = "hello";
x.appendChild( new_row );

问题是新添加的行是可单击的，但不会通过单击的功能来获取警报。

有人知道为什么吗？

最佳答案

问题是新添加的行是可单击的，但不会去
  通过单击功能获得警报。
  
  有人知道为什么吗？


当您执行click事件到tr元素的初始绑定时，该事件仅绑定到DOM中当时存在的tr元素。

默认情况下，这就是事件绑定的工作方式。您只能绑定DOM中当前的内容。

但是，使用jQuery 1.7+的on()或jQuery 1.6-的delegate()方法，您可以将事件与委托绑定。

这使您可以将事件绑定到实际要将事件委托给的元素的最接近的静态父元素。

我假设表本身是最接近的静态父元素，这意味着它始终存在，而您动态添加的只是tr元素。

使用jQuery 1.7+时使用on()看起来类似于：

$('#example').on('click', 'tr', function(){
    alert('You clicked row '+ ($(this).index()) );
});

使用jQuery 1.6-时使用delegate()看起来类似于：

$('#example').delegate('tr', 'click' , function(){
    alert('You clicked row '+ ($(this).index()) );
});

这样做是将事件绑定到ID为example的元素，但将单击委托给该元素内单击的任何tr。每次都委派事件时，tr中任何新添加的#example元素也将包括在内。