jquery - $(document).on('click', '#id', function() {}) 与 $('#id').on('click', function(){})

Question

我试图找出两者之间的区别

$(document).on('click', '#id', function(){});

和

$('#id').on('click', function(){});

我无法找到有关两者之间是否存在任何差异以及如果存在差异可能是什么的任何信息。

有人可以解释一下是否有任何区别吗？

Answer 1

第一个示例演示了事件委托。事件处理程序绑定到 DOM 树更高的元素（在本例中document为

这是可能的，因为大多数 DOM 事件从源点开始向上冒泡。如果单击#id元素，则会生成一个单击事件，该事件将在所有祖先元素中冒泡（旁注：实际上在此之前有一个阶段，称为“捕获阶段”，当事件从树向下传递到目标）。您可以在这些祖先中的任何一个上捕获事件。

第二个示例将事件处理程序直接绑定到元素。该事件仍然会冒泡（除非您在处理程序中阻止它），但由于处理程序绑定到目标，您将看不到此过程的效果。

通过委派事件处理程序，您可以确保对绑定时 DOM 中不存在的元素执行它。如果您的#id元素是在第二个示例之后创建的，则您的处理程序将永远不会执行。通过绑定到在执行时您知道肯定在 DOM 中的元素，您可以确保您的处理程序实际上会附加到某些东西，并且可以在以后适当地执行。

Answer 2

考虑以下代码

<ul id="myTask">
  <li>Coding</li>
  <li>Answering</li>
  <li>Getting Paid</li>
</ul>

现在，这里有区别

// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
  $(this).remove()
});

现在，如果我们再次添加一个 myTask 会怎样？

$('#myTask').append('<li>Answer this question on SO</li>');

单击此 myTask 项不会将其从列表中删除，因为它没有绑定任何事件处理程序。相反，如果我们使用.on，新项目将无需我们付出任何额外的努力即可工作。以下是 .on 版本的外观：

$('#myTask').on('click', 'li', function (event) {
  $(event.target).remove()
});

概括：

The difference between .on() and .click() would be that .click() may not work when the DOM elements associated with the .click() event are added dynamically at a later point while .on() can be used in situations where the DOM elements associated with the .on() call may be generated dynamically at a later point.