Mengapa menggunakan jQuery on () daripada click ()

Saat ini dengan jQuery ketika saya perlu melakukan sesuatu ketika Klik terjadi, saya akan melakukannya seperti ini ...

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

Saya melihat beberapa kode yang dimiliki orang lain dalam sebuah proyek dan mereka melakukannya seperti ini ...

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

Perhatikan sepertinya melakukan hal yang sama sejauh yang saya tahu kecuali mereka menggunakan fungsi live () yang sekarang sudah usang dan dokumen jQuery mengatakan untuk menggunakan on()sebagai gantinya tetapi dengan cara apa pun mengapa menggunakan live / on () daripada contoh pertama saya?

Karena Anda mungkin memiliki elemen yang dibuat secara dinamis (misalnya yang berasal dari panggilan AJAX), Anda mungkin ingin memiliki penangan klik yang sama yang sebelumnya terikat ke pemilih elemen yang sama, Anda kemudian "mendelegasikan" peristiwa klik menggunakan on()dengan argumen pemilih

Untuk menunjukkan:

http://jsfiddle.net/AJRw3/

on()juga bisa identik dengan click()jika Anda tidak menentukan pemilih:

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

identik dengan

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

Dalam artian hanya menambahkan handler satu kali ke semua elemen dengan class elementClass. Jika Anda memiliki yang baru elementClassdatang dari, misalnya $('<div class="elementClass" />'), handler tidak akan terikat pada elemen baru tersebut, Anda perlu melakukan:

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

Asumsi #containeradalah .elementClassleluhur

Jawabannya banyak, masing-masing menyentuh beberapa poin - semoga bisa memberikan jawaban anda, dengan penjelasan yang baik tentang apa dan bagaimana cara menggunakannya.

Menggunakan click()adalah alias untuk bind('click' ...). Menggunakan bind()mengambil DOM apa adanya saat pemroses peristiwa sedang disiapkan dan mengikat fungsi ke setiap elemen yang cocok di DOM. Artinya, jika Anda menggunakan, $('a').click(...)Anda akan mengikat fungsi yang disediakan ke peristiwa klik dari setiap tag jangkar di DOM yang ditemukan saat kode tersebut dijalankan.

Menggunakan live()adalah cara lama di jQuery; ia digunakan untuk mengikat peristiwa seperti bind()halnya, tetapi tidak hanya mengikatnya ke elemen di DOM saat kode dijalankan - ia juga mendengarkan perubahan di DOM dan akan mengikat peristiwa ke elemen yang cocok di masa depan juga. Ini berguna jika Anda melakukan manipulasi DOM dan Anda membutuhkan acara yang ada di beberapa elemen yang mungkin dihapus / diperbarui / ditambahkan ke DOM nanti tetapi tidak ada saat DOM pertama kali dimuat.

Alasan yang live()sekarang terdepresiasi adalah karena implementasinya yang buruk. Untuk menggunakan live(), Anda harus dapat memilih setidaknya satu elemen di DOM pada awalnya (saya percaya). Ini juga menyebabkan salinan fungsi dijalankan terikat ke setiap elemen - dan jika Anda memiliki 1000 elemen, itu banyak fungsi yang disalin.

Penciptaan on()fungsi itu untuk mengatasi masalah-masalah itu. Ini memungkinkan Anda mengikat satu event listener ke objek yang tidak akan berubah di DOM (jadi Anda tidak dapat menggunakan on()elemen yang akan dihapus / ditambahkan ke DOM nanti - ikat ke objek induk), dan cukup terapkan sebuah elemen "filter" sehingga fungsi tersebut hanya dijalankan ketika itu digelembungkan ke elemen yang cocok dengan selektor. Ini berarti Anda hanya memiliki satu fungsi yang ada (bukan sekumpulan salinan) yang terikat ke satu elemen - pendekatan yang jauh lebih baik untuk menambahkan acara "langsung" di DOM.

... dan itulah perbedaannya, dan mengapa setiap fungsi ada dan mengapa live()disusutkan.

• $("a").live()-> Ini akan berlaku untuk semua <a>, bahkan jika dibuat setelah ini dipanggil.
• $("a").click()-> Ini hanya akan berlaku untuk semua <a>sebelum ini dipanggil. (Ini adalah jalan pintas bind(), dan on()di 1.7)
• $("a").on()-> Menyediakan semua fungsionalitas yang diperlukan untuk memasang penangan kejadian. (Terbaru di jQuery 1.7)

Kutipan :

Mulai jQuery 1.7, metode .live () tidak digunakan lagi. Gunakan .on () untuk melampirkan penangan acara. Pengguna jQuery versi lama harus menggunakan .delegate () daripada .live ().
Metode ini menyediakan cara untuk melampirkan penangan peristiwa yang didelegasikan ke elemen dokumen halaman, yang menyederhanakan penggunaan penangan peristiwa saat konten ditambahkan secara dinamis ke halaman. Lihat pembahasan peristiwa langsung versus yang didelegasikan dalam metode .on () untuk informasi selengkapnya.

Metode .on () melampirkan event handler ke set elemen yang saat ini dipilih di objek jQuery. Mulai jQuery 1.7, metode .on () menyediakan semua fungsionalitas yang diperlukan untuk melampirkan penangan kejadian.

Untuk versi sebelumnya, metode .bind () digunakan untuk melampirkan penanganan kejadian secara langsung ke elemen.

click()adalah jalan pintas ke metode non delegasi on(). Begitu:

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

Mendelegasikan acara dengan on(), yaitu. dalam objek yang dibuat secara dinamis, Anda dapat melakukan:

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

Namun, on()memperkenalkan delegasi dalam elemen statis apa pun, tidak documentseperti live()halnya, jadi:

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

Anda harus membaca tentang perbedaan antara livedanbind .

Singkatnya, livemenggunakan delegasi acara, memungkinkan Anda untuk mengikat ke elemen yang ada sekarang dan di masa depan.

Sebaliknya, penangan yang dilampirkan melalui bind(dan pintasannya, seperti click) melampirkan penangan langsung ke elemen DOM yang cocok dengan pemilih, dan oleh karena itu hanya terikat ke elemen yang ada sekarang.

Konsekuensi dari livefleksibilitas adalah kinerja yang menurun, jadi gunakan hanya ketika Anda membutuhkan fungsionalitas yang disediakannya.

$el.click(fn) adalah jalan pintas untuk $el.on('click', fn)

Lihat http://api.jquery.com/click/ dan http://api.jquery.com/on/ untuk info lebih lanjut.

Saat Anda perlu mengikat beberapa penangan acara, dynamically added elementsAnda harus menggunakan live(tidak digunakan lagi) atau onmembuatnya berfungsi. Cukup $('element').click(...);tidak akan berfungsi pada elemen yang ditambahkan secara dinamis ke DOM.

Lebih lanjut tentang Perbedaan Antara jQuery's .bind (), .live (), dan .delegate () .

$ .click () hanyalah jalan pintas untuk mengikat atau di. Dari dokumen jQuery:

Dalam dua variasi pertama, metode ini adalah jalan pintas untuk .bind ("click", handler), serta untuk .on ("click", handler) pada jQuery 1.7. Pada variasi ketiga, saat .click () dipanggil tanpa argumen, ini adalah pintasan untuk .trigger ("klik").

The .on()Metode menempel event ke set yang sedang dipilih elemen dalam objek jQuery. The click()Metode mengikat sebuah event handler untuk "klik" Acara JavaScript, atau pemicu peristiwa pada elemen.

Secara umum .click(...jika target pemilih berubah dengan cepat (mis. Melalui beberapa respons ajax) maka Anda perlu menetapkan perilaku lagi.

Ini .on(...sangat baru (jQuery 1.7) dan dapat mencakup skenario langsung menggunakan peristiwa yang didelegasikan yang merupakan cara yang lebih cepat untuk melampirkan perilaku.

Dalam onmetode, penanganan kejadian dilampirkan ke elemen induk, bukan target.

contoh: $(document).on("click", ".className", function(){});

Dalam contoh di atas, click event handler dilampirkan ke dokumen. Dan itu menggunakan peristiwa menggelegak untuk mengetahui apakah seseorang mengklik elemen target.