Rumah  >  Artikel  >  hujung hadapan web  >  Penjelasan terperinci tentang jQuery menambahkan tindak balas acara kepada kandungan yang dijana secara dinamik jQuery live() method_jquery

Penjelasan terperinci tentang jQuery menambahkan tindak balas acara kepada kandungan yang dijana secara dinamik jQuery live() method_jquery

WBOY
WBOYasal
2016-05-16 15:34:151297semak imbas

Kaedah jQuery live() melampirkan fungsi pemprosesan acara pada semua elemen padanan Walaupun elemen itu dijana kemudian melalui tambah, tambah, selepas dan acara lain, ia masih sah.
Kaedah ini boleh dilihat sebagai varian kaedah .bind(). Apabila menggunakan .bind(), elemen yang dipadankan oleh pemilih akan mempunyai pengendali acara yang dilampirkan padanya, manakala elemen yang ditambahkan kemudian tidak akan. Anda perlu menggunakan .bind() sekali lagi untuk ini. Contohnya:

<body> 
<div class="clickme">Click here</div> 
</body> 

Anda boleh mengikat acara klik mudah pada elemen ini:

Salin kod Kodnya adalah seperti berikut:
$(' .clickme').bind('click', function() { alert(www.jb51.net); }); Apabila elemen diklik, kotak amaran akan muncul. Kemudian, bayangkan bahawa elemen lain ditambah selepas ini.


Salin kod Kod adalah seperti berikut:$('body').append('f7eb0ef206d4c2c451efdc39441d2fedSasaran lain16b28748ea4df4d9c2150843fecfba68');
Walaupun elemen baharu ini juga akan sepadan dengan pemilih ".clickme" , memandangkan elemen ini ditambah selepas memanggil .bind() , mengklik pada elemen ini tidak akan memberi kesan.
Tetapi live() menyediakan kaedah untuk situasi ini. Jika kita mengikat acara klik seperti ini:

Salin kod Kodnya adalah seperti berikut: $('.clickme '). langsung('klik', function() { alert("
www.jb51.net
"); }); Dengan cara ini, mengklik pada elemen yang baru ditambah masih boleh mencetuskan pengendali acara.

Delegasi acara
Kaedah live() berfungsi pada elemen yang belum lagi ditambahkan pada DOM disebabkan penggunaan delegasi acara: pengendali acara yang terikat kepada elemen nenek moyang boleh bertindak balas kepada peristiwa yang dicetuskan pada keturunan. Pengendali acara yang dihantar ke live() tidak akan terikat pada elemen, tetapi akan dianggap sebagai pengendali acara khas dan terikat pada nod akar pokok DOM.
Dalam contoh kami, apabila elemen baharu diklik, langkah berikut berlaku:
1. Hasilkan acara klik dan hantar ke dc6dce4a544fdca2df29d5ac0ea9906b
2. Memandangkan tiada fungsi pengendalian peristiwa yang terikat secara langsung kepada dc6dce4a544fdca2df29d5ac0ea9906b, acara itu berbuih sehingga ke pepohon DOM.
3. Peristiwa terus menggelembung ke nod akar pepohon DOM ini fungsi pemprosesan acara khas terikat padanya secara lalai.
4. Laksanakan fungsi pengendalian acara klik khas yang terikat dengan .live().
5. Fungsi pemprosesan peristiwa ini mula-mula mengesan sasaran objek acara untuk menentukan sama ada ia perlu diteruskan.
6. Ujian ini dilaksanakan dengan menguji sama ada $(event.target).closest('.clickme') boleh mencari elemen padanan.
7. Jika elemen yang sepadan ditemui, pengendali acara asal dipanggil.
8. Memandangkan ujian dalam langkah 5 di atas hanya akan dilakukan apabila peristiwa itu berlaku, elemen yang ditambahkan pada bila-bila masa boleh bertindak balas kepada peristiwa ini.
Di atas ialah pengenalan terperinci kepada kaedah jQuery live() untuk menambahkan respons acara kepada kandungan yang dijana secara dinamik. Saya harap ia akan membantu pembelajaran semua orang.
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn