JQuery和事件处理程序，如果我拆分选择器，为什么重要？

Question

在JQuery中，我的事件处理程序的工作方式有所不同，具体取决于我是否拆分了选择器。

选择器未拆分（#myId .someClass）：

$('#myId .someClass').on('click', function (e) {
  alert('x');
});

选择器“拆分”（#myId ........ .someClass）：

$('#myId').on('click', '.someClass', function (e) {
  alert('x');
});

当我使用后者时，我将从同一次点击中多次获得相同的事件，而第一次只给我一次点击事件（但我有时会遇到第一个甚至不起作用）。

有人可以解释为什么会有这种差异吗？

Answer 1

区别在于第一个版本

$('#myId .someClass').on('click', function (e) { ...

将click事件绑定到所有.someClass个元素，这些元素是id为#myId的元素的后代，并且在加载页面时已经在DOM中，而第二个版本

$('#myId').on('click', '.someClass', function (e) { ..

会将#myId元素中的click事件委托给具有类.someClass的所有后代元素，即使它们稍后会动态添加。

供参考：http://api.jquery.com/on/

作为一个重要的引用，“直接和委托事件”部分：

  

事件处理程序仅绑定到当前选定的元素;他们   在您的代码调用.on（）时页面上必须存在。