Зачем использовать jQuery on() вместо click()

В настоящее время с jQuery, когда мне нужно что-то делать при нажатии Click, я сделаю это вот так...

$(".close-box").click( function() {
    MoneyBox.closeBox();
    return false;
});

Я смотрел какой-то код, который у кого-то еще есть в проекте, и они делают это вот так...

$(".close-box").live("click", function () {
    MoneyBox.closeBox();
    return false;
});

Заметьте, что это похоже на то же, насколько я могу сказать, за исключением того, что они используют функцию live(), которая теперь устарела, и jQuery docs говорят использовать on() вместо этого, но в любом случае, зачем использовать live/on() вместо моего первого примера?

Ответы

Ответ 1

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

Чтобы продемонстрировать:

http://jsfiddle.net/AJRw3/

on() также может быть синонимом click(), если у вас нет указателя выбора:

$('.elementClass').click(function() { // code 
});

является синонимом

$('.elementClass').on('click', function() { // code
});

В том смысле, что он только добавляет обработчик один раз ко всем элементам с классом elementClass. Если у вас появился новый elementClass, например $('<div class="elementClass" />'), обработчик не будет привязан к этому новому элементу, вам нужно сделать:

$('#container').on('click', '.elementClass', function() { // code
});

Предполагая, что #container является .elementClass предком

Ответ 2

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

Использование click() является псевдонимом bind('click' ...). Использование bind() принимает DOM так же, как и когда прослушиватель событий настраивается и привязывает функцию к каждому из соответствующих элементов в DOM. То есть, если вы используете $('a').click(...), вы привяжете функцию, предоставленную к событию click каждого тэга привязки в DOM, найденном при запуске этого кода.

Использование live() было старым способом в jQuery; он был использован для связывания событий, как это делает bind(), но он не просто связывает их с элементами в DOM при запуске кода - он также прослушивает изменения в DOM и связывает события с любыми согласованными в будущем элементами как Что ж. Это полезно, если вы выполняете манипуляции с DOM, и вам нужно, чтобы какое-то событие существовало на некоторых элементах, которые могут быть удалены/обновлены/добавлены в DOM позже, но не существуют, когда DOM впервые загружен.

Причина, по которой live() теперь обесценивается, состоит в том, что она плохо реализована. Чтобы использовать live(), вы должны были сначала выбрать хотя бы один элемент в DOM (я полагаю). Это также привело к тому, что копия функции запускается для привязки к каждому элементу - и если у вас есть 1000 элементов, то много скопированных функций.

Создание функции on() состояло в том, чтобы преодолеть эти проблемы. Он позволяет привязать одного прослушивателя событий к объекту, который не будет изменен в DOM (поэтому вы не можете использовать on() для элемента, который будет удален/добавлен в DOM позже - привяжите его к родительскому объекту), и просто примените элемент "filter", чтобы функция запускалась только тогда, когда она была пузырьковата до элемента, соответствующего селектору. Это означает, что у вас есть только одна функция, которая существует (а не куча копий), привязанная к одному элементу - гораздо лучший подход к добавлению "живых" событий в DOM.

... и вот что такое различия и почему каждая функция существует и почему live() обесценивается.

Ответ 3

$("a").live() → Он будет применяться ко всем <a>, даже если он создан после вызова.
$("a").click() → Он будет применяться ко всем <a> до того, как это будет вызвано. (Это сокращение от bind() и on() в 1.7)
$("a").on() → Предоставляет все функции, необходимые для прикрепления обработчиков событий. (Новый в jQuery 1.7)

Цитаты:

Как и в jQuery 1.7, метод .live() устарел. Используйте .on() для присоединения обработчиков событий. Пользователи более ранних версий jQuery должны использовать .delegate() в предпочтении .live().
Этот метод предоставляет возможность прикреплять делегированные обработчики событий к элементу документа на странице, что упрощает использование обработчиков событий при контенте динамически добавляется на страницу. См. Обсуждение прямых и делегированных событий в методе .on() для получения дополнительной информации.

Метод .on() привязывает обработчики событий к выбранному в данный момент набору элементов в объекте jQuery. Начиная с jQuery 1.7, метод .on() предоставляет все функции, необходимые для прикрепления обработчиков событий.

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

Ответ 4

click() является ярлыком для метода не делегирования on(). Итак:

$(".close-box").click() === $(".close-box").on('click')

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

$(document).on('click', '.close-box') // Same as $('.close-box').live()

Но on() вводит делегирование в любом статическом элементе, а не только document как live(), так:

$("#closestStaticElement").on('click', '.close-box')

Ответ 5

Вы должны прочитать разницу между live и bind.

В двух словах live используется делегирование событий, что позволяет вам привязываться к элементам, которые существуют сейчас и в будущем.

Напротив, обработчики, прикрепленные через bind (и его ярлыки, например click), прикрепляют обработчики непосредственно к элементам DOM, соответствующим селектору, и поэтому связаны только с существующими элементами.

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

Ответ 6

$el.click(fn) является ярлыком для $el.on('click', fn)

См. http://api.jquery.com/click/ и http://api.jquery.com/on/ для Дополнительная информация.

Ответ 7

Когда вам нужно привязать некоторые обработчики событий к dynamically added elements, вы должны использовать live (устаревший) или on, чтобы он работал. Просто $('element').click(...); не будет работать с любым динамически добавленным элементом в DOM.

Подробнее о Разница между jQuerys.bind(),.live() и .delegate().

Ответ 8

$. click() - это просто ярлык для привязки или включения. Из документов jQuery:

В первых двух вариантах этот метод является ярлыком для .bind("click", обработчик), а также для .on("click", обработчик) по jQuery 1.7. В третьем варианте, когда .click() вызывается без аргументов, это ярлык для .trigger("click").

Ответ 9

Метод .on() прикрепляет обработчики событий к выбранному в данный момент набору элементов в объекте jQuery. Метод click() связывает обработчик события с событием "click" JavaScript или запускает это событие для элемента.

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

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

Ответ 10

В методе on обработчик событий прикрепляется к родительскому элементу вместо целевого.

пример: $(document).on("click", ".className", function(){});

В приведенном выше примере обработчик события привязки прикреплен к документу. И он использует событие bubbling, чтобы узнать, кто-то нажал на целевой элемент.