javascript - 将事件绑定(bind)到 AJAX 的子元素

Question

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

$("#m"+ event.PeerId).live("悬停", function (args) { 调试器； }

它有效，但是

$("#m"+ event.PeerId + "sendMessage").live("click", function (args) { 调试器； }

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

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

Answer 1

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

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

如果你的 id 都以 m 开头，但peerid还不知道，请使用:

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

委托(delegate)事件处理程序应附加到不更改的祖先(如果没有更接近更改元素的东西，则默认为 document)。

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

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