javascript - 使用 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

事件委托(delegate)就是您所追求的:

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

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

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