我需要检测动态添加到表中的行上的单击事件（使用jQuery）。 表的id为MyTable。
对于在设计时创建/硬编码到本地页的表行来说，这是没有问题的； 我知道我可以使用$('#MyTable TR')。单击（。。。）；
但是，我的用例是通过ajax加载新的表行并将其追加到表中。 在这种情况下，不调用click事件处理程序。
过去，我使用jQuery的.live()函数来处理动态加载的元素，但我看到现在已经不推荐使用.on()。 这将是好的，除了它是不工作的我在这种情况下。
下面是一些演示代码和一个显示该问题的jsfiddle。 请注意，单击“Static Row”（静态行）会显示一个警告框，这是预期的，但动态添加的行不会出现这种情况:
<!DOCTYPE html>
<body>
<h1>Dynamic table event test</h1>
<table id="myTable">
<tr><td>Static row</td></tr>
</table>
<button onclick="addTableRow()">Add row</button>
<script>
function addTableRow() {
$('#myTable').append('<tr><td>Dynamic row</td></tr>');
}
$('#myTable tr').on('click', function() {
alert('Row clicked');
});
</script>
</body>
</html>
更改
$('#myTable tr').click(...);
至
$('#myTable').on('click', 'tr', function() { ... });
第一种方法只为与选择器匹配的元素创建eventhandelrs，并将其附加到加载期间存在的元素。 第二个将处理程序附加到父表。
请尝试以下操作:
$('#myTable').on('click', 'tr', function() {
alert('something');
});
您需要使用inside选择器将事件附加到动态创建的元素。 因为此方法将事件附加到已存在的父级。
$('#myTable').on('click', 'tr', function() {
alert('Row clicked');
});
由于在加载DOM-tree之后添加了一个新元素（在您的示例中为tr)，因此该元素实际上被认为是不存在的（作为DOM-element），因此事件不会被触发。
然而，当您将事件绑定到父元素（在向DOM添加新元素/外星人元素之前和之后都存在）并以其子元素为目标（即tr)时，将实现所需的操作。
