$(документ.)на('нажмите', '#идентификатор', функция() {}) против $('#идентификатор').on ('click', function () {}) [закрыто]

Я пытался выяснить, в чем разница между

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

и

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

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

может кто-нибудь объяснить, если есть какая-либо разница вообще?

2 75
syntax jquery

2 ответа:

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

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

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

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

60

рассмотрим следующий код

<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 новый элемент будет работать без каких-либо дополнительных усилий с нашей стороны. Вот как .по версии выглядит так:

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

резюме:

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

12