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

Ответ 1

Первый пример демонстрирует делегирование событий. Обработчик события привязан к элементу, расположенному выше дерева DOM (в данном случае, document) и будет выполняться, когда событие достигнет этого элемента, возникшего на элементе, соответствующем селектору.

Это возможно, потому что большинство событий DOM пузыряют дерево из точки происхождения. Если вы нажмете на элемент #id, генерируется событие клика, которое будет пузыриться через все элементы-предки (примечание стороны: на самом деле есть фаза до этого, называемая "фазой захвата", когда событие спускается вниз дерево к цели). Вы можете зафиксировать событие для любого из этих предков.

Второй пример привязывает обработчик события непосредственно к элементу. Событие по-прежнему будет пузыриться (если вы не предотвратите это в обработчике), но поскольку обработчик привязан к цели, вы не увидите эффектов этого процесса.

Делегируя обработчик событий, вы можете убедиться, что он выполняется для элементов, которые не существовали в DOM во время привязки. Если ваш #id элемент был создан после вашего второго примера, ваш обработчик никогда не выполнит. Связываясь с элементом, который, как вы знаете, определенно находится в DOM во время выполнения, вы гарантируете, что ваш обработчик фактически будет привязан к чему-то и может быть выполнен соответствующим образом позже.

Ответ 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()
});

Резюме:

Разница между .on() и .click() заключается в том, что .click() может не работать, когда элементы DOM, связанные с событием .click(), динамически добавляются в более позднюю точку, тогда как .on() может использоваться в ситуациях, когда элементы DOM, связанные с вызовом .on(), могут генерироваться динамически в более поздней точке.