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

Question

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

我的script.js文件中有一些处理程序，这里有一个：

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

我如何确定：

1. 处理程序始终附加到满足jQuery选择器的所有按钮，即使那些刚刚通过ajax加载到页面的按钮
2. 每个ajax调用上的每个元素都没有附加数十亿次处理程序
3. 通过jQuery类而不是内联onclick处理程序处理整个网站的一般惯例是什么？这是一个坏习惯吗？前两个问题显然适用于这个问题。

我对通过jQuery概念进行事件处理非常陌生，我想让script.js保持尽可能干净，不要用本地化的东西污染它，另一方面，我希望我的按钮只包含类名，而不是加密函数等。一般规则是我的代码应尽可能干净，而每个处理程序在每次ajax调用时都没有附加数万次。
我不是在寻找上面提到的问题的解决方案，而是关于如何有效和干净地处理jQuery处理程序的一般指导。

Answer 1

事件委托就是您所追求的目标：

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

确保在附加事件处理程序时存在#parent。如果没有，请使用document。

通过将事件处理程序附加到#parent，子项触发的事件将委派给父项，如果目标元素与您的选择器匹配则接受。这将考虑动态创建的元素，甚至不会将事件处理程序附加到这些子项开始。