将事件绑定到 AJAX 中的子元素

Question

为了提高可维护性，我尝试将在脚本中动态生成的 HTML 替换为 AJAX 查询结果。但是将事件处理程序绑定到动态内容存在相当少见的问题，尽管有很多解决方案，其中大部分只是部分起作用。我的意思是，如果我写了

$("#m" + event.PeerId).live("hover", function (args) { debugger; }

它可以工作，但是

$("#m" + event.PeerId + " sendMessage").live("click", function (args) { debugger; }

不起作用，如果我单击，事件不会发生。我也可以跟踪根下载元素的悬停事件，但我无法跟踪加载、就绪等 - 它们也永远不会发生。

请告诉我如何处理作为加载内容的某些子元素的按钮点击。

Answer 1

如果您使用的是任何最新版本的 jQuery，您应该使用 委托事件处理程序：

$(document).on("click", "#m" + event.PeerId + " sendMessage", function (args) {
     debugger;
});

如果你的 id 都以 m 开头，但 peerid 还不知道，使用这个：

$(document).on("click", "[id^=m] sendMessage", function (args) {
     debugger;
});

委托的事件处理程序应该附加到一个不变的祖先（document 是默认值，如果没有更接近变化的元素是方便的）。

它们的工作方式是侦听使祖先冒泡的事件，处理程序附加到的事件，然后应用jQuery过滤器，调用函数对于导致事件的每个匹配元素。

注意：切勿将'body' 用于委托事件处理程序，因为它存在与样式相关的错误（这可能导致事件不发生）。如果您没有更接近的不变元素，请始终使用document。