Question

我尝试了两种方法都很好。有理由我应该使用其中一个吗？

第一种方法：

$('div.parent').find('.cancel-btn').on('click', function(){
  alert('cancel clicked');
});

第二种方法：

$('div.parent').on('click', '.cancel-btn', function(){
  alert('cancel clicked');
});

Answer 1

从我阅读的文档来看，它们看起来非常相似，只是第二个将触发事件，即使子元素不存在。这很有趣。

从中我们可以推断出第一个版本连接了目标（.cancel-btn）元素上的click事件监听器。它在创建监听器时花费时间查找该元素，并且当click事件触发监听器时没有DOM遍历要求。

与此同时，第二个选项将点击事件的监听器连接到父级，然后在事件触发时搜索孩子。

因此理论上，从第二种选择的用户角度来看，将存在有限的性能差异。虽然其影响取决于页面的元素密度和树形组成。

我想在大多数情况下，时间影响太小而不重要。在这种情况下，唯一真正的区别是关于第二个选项触发的点，而不管子元素是否存在。