Навіщо використовувати jQuery на () замість 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(...)ви прив’яжете функцію, що надається, до події 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(){});

У наведеному вище прикладі до документа додано обробник події клацання. І він використовує барботаж подій, щоб дізнатись, чи натиснув хтось на цільовий елемент.