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

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

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

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

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

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

Поскольку у вас могут быть динамически сгенерированные элементы (например, поступающие из вызова AJAX), вам может потребоваться тот же обработчик кликов, который ранее был привязан к тому же селектору элемента, затем вы «делегируете» событие клика, используя 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предок

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

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

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

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

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

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

• $("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 () используется для прикрепления обработчика событий непосредственно к элементам.

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')

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

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

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

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

$el.click(fn) это ярлык для $el.on('click', fn)

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

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

Подробнее о различиях между .bind (), .live () и .delegate () в jQuery .

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

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

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

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

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

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

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

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