Javascript 使用jQuery附加处理程序的正确方法

我有一个包含许多按钮的页面，其中许多是在初始jQuery加载之后使用ajax添加的

我的

script.js

文件中有一些处理程序，下面是一个：

$('.editor-button.remove').click(function () {
 var row = $(this).parent('.row');
 row.remove();
});

我如何确保：

处理程序总是附加到满足jQuery选择器的所有按钮上，即使是那些刚刚通过ajax加载到页面的按钮

在每次ajax调用中，处理程序没有无数次附加到每个元素

通过jQuery类而不是内联

onclick

处理程序来处理整个网站的一般惯例是什么，这是一个坏习惯吗？前两个问题显然适用于这个问题

我对通过jQuery概念进行事件处理非常陌生，我希望尽可能保持

script.js

干净，不要用本地化的东西污染它，另一方面，我希望我的按钮只包含类名，不加密函数等。一般规则是，我的代码应该尽可能干净，而每个处理程序不会在每次ajax调用中附加无数次。

---

我不是在寻找我上面提到的问题的解决方案，而是寻找关于如何尽可能高效和干净地处理jQuery处理程序的一般指导原则。

事件委派是您所追求的：

$('#parent').on('click', '.editor-button.remove', function() {
    $(this).closest('.row').remove();
});

确保在连接事件处理程序时存在

#parent

。如果没有，请使用

文档

---

通过将事件处理程序附加到

#parent

，子元素触发的事件将被委托给父元素，如果目标元素与选择器匹配，则会被接受。这将考虑动态创建的元素，甚至不会首先将事件处理程序附加到这些子级。

事件委派是您所追求的：

$('#parent').on('click', '.editor-button.remove', function() {
    $(this).closest('.row').remove();
});

确保在连接事件处理程序时存在

#parent

。如果没有，请使用

文档

---

通过将事件处理程序附加到

#parent

，子元素触发的事件将被委托给父元素，如果目标元素与选择器匹配，则会被接受。这将考虑到动态创建的元素，甚至不会首先将事件处理程序附加到这些子元素。

顺便说一句，我使用的那些函数不能是特定于页面或特定于id的，我希望保持js的干净和动态，并且不会用本地化的东西污染它。所以我可以使用

$（'body'）吗

相反？@Shimmy：使用连接事件处理程序时出现的最接近的父元素。如果没有，则将其附加到

$（'body'）

或

$（文档）

@Shimmy:第二个无效。@Shimmy使用最近的父ID不会污染代码。按ID查找元素比搜索具有特定类名的元素更快，并确保事件处理程序仅在一组特定的元素上运行。此外，这个答案被普遍认为是处理这个问题的最佳方法。正如他所提到的，您不需要绑定到多个元素，它会捕获DOM就绪后加载的元素。如果担心松耦合/泛型实现，可以通过函数参数将id传递到函数中+1对于这个答案。顺便说一句，我使用的那些函数不能是特定于页面或特定于id的，我想保持js的干净和动态，并且不要用本地化的东西污染它。所以我可以使用

$（'body'）

来代替吗？@Shimmy：使用附加事件处理程序时出现的最接近的父元素。如果没有，则将其附加到

$（'body'）

或

$（文档）

@Shimmy:第二个无效。@Shimmy使用最近的父ID不会污染代码。按ID查找元素比搜索具有特定类名的元素更快，并确保事件处理程序仅在一组特定的元素上运行。此外，这个答案被普遍认为是处理这个问题的最佳方法。正如他所提到的，您不需要绑定到多个元素，它会捕获DOM就绪后加载的元素。如果担心松耦合/泛型实现，可以通过函数参数将id传递到函数中+我对这一答案表示怀疑。