如何将 jquery 事件重新绑定到通过 ajax 加载的内容，而不为每个事件/类执行此操作答案

【问题标题】：How to rebind jquery events to content loaded via ajax WITHOUT doing this for every event / class如何将 jquery 事件重新绑定到通过 ajax 加载的内容，而不为每个事件/类执行此操作
【发布时间】：2013-11-04 18:55:09
【问题描述】：

所以我有这个我绑定的 jquery-App：

我的所有“.btn-delete”元素的“删除功能”
我的所有“.btn-add”元素的“添加功能”

等等。在我的 webapp 的一个 div 中，我对内容进行异步加载，包括我想要绑定“删除”和“添加”功能的元素。这些元素也有一个“btn-delete”或“btn-add”类——但是由于内容是异步加载的，所以如果不做任何事情，事件就不会绑定到它们。

所以我听说使用.on('click' ...) 函数可以在异步加载内容后立即触发，我可以重新绑定这些函数。但是我必须对我想使用的每个功能都这样做。那是我不想要的。

我想要的是有一个通用函数，它将所有以前定义的事件函数重新绑定到我加载它们的 div 容器中的每个元素。

有没有办法做类似的事情：

"将所有事件函数重新绑定到 div-id xyz 中异步加载的元素"

如果我不必手动为每个回调重新绑定每个函数，那会让我的生活变得更加轻松。

【问题讨论】：

标签： javascript jquery ajax asynchronous bind

【解决方案1】：

如果您使用委托事件处理，您永远不必重新绑定。

$('body').on('click', '.btn-delete', function(ev) {
  // delete ...
});

这设置了一个事件处理程序，当“点击”事件从任何元素冒泡到主体时，该事件处理程序可以随时捕获。它作用于与给定选择器匹配的元素的任何“点击”。按钮最初是在那里还是动态添加的并不重要。

您不必将处理程序放在<body> 元素上；它们可以进入容器的任何层。

【讨论】：

@HamedMomeni 不，委托事件处理程序没有有意义的性能问题。选择器一次只需要针对一个 DOM 元素进行测试。