将事件绑定到AJAX的子元素

Question

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

$("#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。