Javascript 将事件附加到动态生成的HTML？

我在将静态html表转换为JavaScript生成的html表时遇到问题。前面，我的js/jQuery代码集在表中的数据元素上单击处理程序，如下所示：

$(function() {
   $('my_table td').click(function(e) {
   ...handler code
});

这很好，但我不得不更改我的表，以便在JavaScript中动态生成内容：

// 'table_contents' is "<table><tbody>...</tbody></table>"
$('#my_table').html(table_contents);

我试着用三种不同的方式对点击

td

'42'做出回应：

$("#date_test").on("click", "td", function() {
   alert($(this).text());
});

$('#date_test').delegate('td', 'click', function() {
   alert($(this).text());
});

$(function() {
   $('#date_test td').click(function() {
      alert($(this).text());
   })
})

其中，只有第三种有效。注意，这完全是静态代码；这是3个不同的简化测试用例。对于前2种情况，代码从未执行过；我可以输入一个语法错误而不是警报，这没有什么区别。知道我做错了什么吗？我在jQuery1.7上。谢谢。

您可以使用该方法将事件处理程序委托给祖先元素。假设在执行以下代码时DOM中存在

#my_table

：

$("#my_table").on("click", "td", function() {
    //Do stuff
});

上的

方法仅在jQuery 1.7+中可用。如果您使用的是旧版本，则可以改用

这是因为DOM事件从它们通过DOM产生的元素中冒泡出来。在祖先上捕获事件，如果源与选择器匹配，则触发事件处理程序

这不仅提供了处理源自最初不属于DOM的元素的事件的好处，还可以提高性能，因为它需要更少的事件处理程序（如果将事件处理程序绑定到每个
td
，并且有很多
td
元素，那么就有很多事件处理程序-使用事件委派意味着只有一个）

更新（参见问题编辑）

第三个示例工作的原因是您将代码包装在
ready
事件处理程序中。
$（function（）{…}）；
是
$（document.ready（function（）{…}）；
的缩写

这是必需的，因为否则要将事件处理程序绑定到的
#date_test
元素将不存在于DOM中。如果要执行任何DOM操作，请始终将代码放入就绪的事件处理程序中

您可以将
置于
版本或
委托
版本中的ready event handler函数中，它应该可以工作。
根据您使用的jquery版本，您可以尝试使用jquery.on（）


如果您使用的是旧版本，则.delegate（）将适用于您：

您可以使用on（）方法

我最近也遇到了同样的问题。事实证明，加载JS后进入页面的元素不会附加事件。
我通过使用委托很容易地解决了这个问题。它通过父元素传播事件，直到它们被捕获并执行。诀窍是确保您将事件委托给第一次加载js时始终存在的元素，以便在容器中添加的任何新元素都将捕获它们的事件

$('#container').delegate('#my_table td', 'click' (function(e) {...

刚刚注意到你的编辑。我已经更新了我的答案。在旧版本中，你可以使用live aswell@shabunc-在非常旧的版本中，您可以使用
live
。请记住，从1.7开始，它就不推荐使用，并且在
on
或
delegate
可用时不应使用（我相信从1.4开始）AAAHHH……是这样做的。这东西使C++看起来像块蛋糕。谢谢。没问题，我很高兴能帮助你：这和C++等非常不同，但是看看你以前的一些问题，我想你很快就会掌握它的。
$("#my_table td").on("click", function(event){
    alert($(this).text());
});

$('#container').delegate('#my_table td', 'click' (function(e) {...