Metode jQuery .live () vs .on () untuk menambahkan acara klik setelah memuat html dinamis

Saya menggunakan jQuery v.1.7.1 di mana metode .live () tampaknya sudah usang.

Masalah yang saya alami adalah ketika memuat dinamis html ke dalam elemen menggunakan:

$('#parent').load("http://..."); 

Jika saya mencoba dan menambahkan acara klik setelah itu tidak mendaftar acara menggunakan salah satu dari metode ini:

$('#parent').click(function() ...); 

atau

// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...); 

Apa cara yang benar untuk mencapai fungsi ini? Tampaknya hanya berfungsi dengan .live () untuk saya, tetapi saya seharusnya tidak menggunakan metode itu. Perhatikan bahwa #child adalah elemen yang dimuat secara dinamis.

Terima kasih.

Jika Anda ingin penangan klik berfungsi untuk elemen yang dimuat secara dinamis, maka Anda mengatur pengendali kejadian pada objek induk (yang tidak dimuat secara dinamis) dan memberikannya pemilih yang cocok dengan objek dinamis Anda seperti ini:

$('#parent').on("click", "#child", function() {});

Penangan acara akan dilampirkan ke #parentobjek dan kapan saja acara klik muncul hingga berasal dari mana #child, itu akan memecat penangan klik Anda. Ini disebut penanganan acara yang didelegasikan (penanganan acara didelegasikan ke objek induk).

Ini dilakukan dengan cara ini karena Anda dapat melampirkan peristiwa ke #parentobjek bahkan ketika #childobjek belum ada, tetapi ketika nanti ada dan diklik, acara klik akan menggelembung ke #parentobjek, ia akan melihat bahwa itu berasal #childdan ada pengendali acara untuk mengklik #childdan memecat acara Anda.

Coba ini:

$('#parent').on('click', '#child', function() {
    // Code
});

Dari $.on()dokumentasi:

Penangan acara hanya terikat pada elemen yang dipilih saat ini; mereka harus ada di halaman pada saat kode Anda membuat panggilan ke .on().

Anda #childelemen tidak ada ketika Anda menelepon $.on()di atasnya, sehingga acara ini tidak terikat (seperti $.live()). #parentNamun, memang ada, jadi mengikat acara itu baik-baik saja.

Argumen kedua dalam kode saya di atas bertindak sebagai 'filter' untuk memicu hanya jika acara tersebut menggelembung #parentdari #child.

$(document).on('click', '.selector', function() { /* do stuff */ });

EDIT: Saya memberikan sedikit informasi tentang cara kerjanya, karena ... kata-kata. Dengan contoh ini, Anda menempatkan pendengar di seluruh dokumen.

Ketika Anda clickpada elemen apa pun yang cocok .selector, acara tersebut akan muncul hingga ke dokumen utama - selama tidak ada pendengar lain yang memanggil event.stopPropagation()metode - yang akan menjadi puncak dari peristiwa yang menggelegak ke elemen induk.

Alih-alih mengikat ke elemen atau set elemen tertentu, Anda mendengarkan acara yang berasal dari elemen yang cocok dengan pemilih yang ditentukan. Ini berarti Anda dapat membuat satu pendengar, satu kali, yang secara otomatis akan cocok dengan elemen yang ada saat ini serta elemen yang ditambahkan secara dinamis.

Ini cerdas karena beberapa alasan, termasuk kinerja dan pemanfaatan memori (dalam aplikasi skala besar)

EDIT:

Jelas, elemen orangtua terdekat yang dapat Anda dengarkan lebih baik, dan Anda dapat menggunakan elemen apa pun documentselama anak-anak yang ingin Anda pantau peristiwa berada di dalam elemen orangtua itu ... tapi itu benar-benar tidak ada hubungannya dengan pertanyaan.

Setara dengan .live () di 1,7 terlihat seperti ini:

$(document).on('click', '#child', function() ...); 

Pada dasarnya, lihat dokumen untuk acara klik dan filter untuk # anak.

Saya tahu ini agak terlambat untuk jawaban, tetapi saya telah membuat polyfill untuk metode .live (). Saya sudah mengujinya di jQuery 1.11, dan sepertinya berfungsi cukup baik. Saya tahu bahwa kami seharusnya menerapkan metode .on () sedapat mungkin, tetapi dalam proyek-proyek besar, di mana tidak mungkin untuk mengkonversi semua panggilan .live () ke panggilan .on () yang setara untuk alasan apa pun, berikut ini mungkin kerja:

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

Cukup sertakan setelah Anda memuat jQuery dan sebelum Anda menelepon langsung ().

.on () untuk jQuery versi 1.7 ke atas. Jika Anda memiliki versi yang lebih lama, gunakan ini:

$("#SomeId").live("click",function(){
    //do stuff;
});

Saya menggunakan 'live' di proyek saya tetapi salah satu teman saya menyarankan agar saya menggunakan 'on' daripada live. Dan ketika saya mencoba menggunakannya saya mengalami masalah seperti yang Anda alami.

Pada halaman saya, saya membuat baris tombol tabel dan banyak hal dom secara dinamis. tetapi ketika saya gunakan pada sihir menghilang.

Solusi lain seperti menggunakannya seperti anak kecil hanya memanggil fungsi Anda setiap kali di setiap klik. Tetapi saya menemukan cara untuk mewujudkannya lagi dan inilah solusinya.

Tulis kode Anda sebagai:

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

Pemanggil panggilan (); setelah Anda membuat objek di halaman seperti ini.

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

Dengan cara ini fungsi Anda dipanggil ketika seharusnya tidak setiap klik pada halaman.