JQuery: разница между .click() AND.on("click")

Ответ 1

В конце дня каждое событие привязано к некоторому элементу в DOM. В случае .bind вы привязываетесь непосредственно к элементу (или элементам) объекта jQuery. Если, например, ваш объект jQuery содержал 100 элементов, вы бы связывали 100 прослушивателей событий.

В случае .live, .delegate и .on, один прослушиватель событий связан, как правило, на одном из самых верхних узлов дерева DOM: document, document.documentElement () или document.body. Поскольку события DOM пузырятся через дерево, обработчик событий, прикрепленный к элементу body, может фактически получать события кликов, происходящие из любого элемента на странице. Таким образом, вместо того, чтобы связывать 100 событий, вы могли бы связать только один.

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

Другим преимуществом .on является то, что если вы добавляете элементы в DOM, вам не нужно беспокоиться о привязке обработчиков событий к этим новым элементам. Возьмем, например, список HTML:

<ul id="todo">
  <li>buy milk</li>
  <li>arrange haircut</li>
  <li>pay credit card bill</li>
</ul>

Далее, некоторые jQuery:

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

Теперь, что, если мы добавим todo?

$('#todo').append('<li>answer all the questions on SO</li>')

Нажатие этого объекта todo не удалит его из списка, поскольку он не связан с обработчиками событий. Если бы мы использовали .on, новый элемент работал бы без каких-либо дополнительных усилий с нашей стороны. Вот как выглядела бы версия .on:

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

Ответ 2

В обычном .click(..., если цель селектора изменяется "на лету" (например, через некоторый ответ ajax), вам нужно будет снова назначить поведение.

В .live(... поведение будет автоматически применено к селектору.

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

Ответ 3

Единственное различие заключается в том, что .click() будет применяться к элементам, которые существуют в DOM с этим конкретным селектором (только те, что уже).
С другой стороны, .on(selector ,"click",callback); будет применяться ко всем элементам, которые соответствуют этому селектору даже в будущем, позвольте мне привести пример:

$('p').click(function(){
$(this).next('<p>this is a copy of the previous paragraph </p>');
});

Если вы нажмете на абзац, в котором говорится: "Это копия предыдущего абзаца" (новая), вы не получаете результат, который хотите добавить, чтобы добавить абзац рядом с щелчком, потому что он был не там в начале

но если вы используете

$('p').on("click",function(){
$(this).next('<p>this is a copy of the previous paragraph </p>');
});

вы получите то, что хотите (потому что .on или .delegate найти совпадение даже с новыми)