Ringkasan masalah yang berlaku apabila mengikat elemen dinamik dengan jQuery on()_jquery

Kaedah jQuery on() ialah kaedah yang disyorkan secara rasmi untuk acara mengikat. Gunakan kaedah on() untuk mengikat peristiwa tertentu kepada elemen dinamik yang dibuat secara dinamik pada masa hadapan, seperti tambah, dsb.

Apabila saya menggunakan sebelum ini, ia sentiasa

$("").on('click','function(){ 
}') 

Kemudian, saya mendapati bahawa kadangkala ia tidak boleh diikat (seperti apabila elemen dijana secara dinamik selepas menyemak dokumentasi, saya mendapati bahawa penggunaan yang betul harus

$(document).on("change","#pageSize_out",function(){ 
if($("#page_out").val()!=0){ 
$("#pageSize").val($(this).val()); 
list(); 
} 
}) 

Juga, sila ambil perhatian

Memandangkan jawapan ini mendapat banyak perhatian, berikut adalah dua nasihat tambahan:

1) Apabila boleh, cuba ikatkan pendengar acara kepada elemen yang paling tepat, untuk mengelakkan pengendalian acara yang sia-sia.

That is, if you're adding an element of class b to an existing element of id a, then don't use
$(document.body).on('click', '#a .b', function(){
but use
$('#a').on('click', '.b', function(){

2) Berhati-hati, apabila anda menambah elemen dengan id, untuk memastikan anda tidak menambahkannya dua kali Bukan sahaja "tidak sah" dalam HTML untuk mempunyai dua elemen dengan id yang sama tetapi banyak yang rosak perkara. Contohnya, pemilih "#c" akan mendapatkan hanya satu elemen dengan id ini.

on(events,[selector],[data],fn)

acara: Satu atau lebih jenis acara dipisahkan oleh ruang dan ruang nama pilihan, seperti "klik" atau "keydown.myPlugin".
pemilih: Rentetan pemilih untuk keturunan penapis bagi elemen pemilih yang mencetuskan acara. Jika pemilih adalah batal atau ditinggalkan, acara sentiasa dicetuskan apabila ia mencapai elemen yang dipilih.

data: Apabila peristiwa dicetuskan, event.data mesti dihantar ke fungsi pemprosesan acara.

fn: Fungsi dilaksanakan apabila acara dicetuskan. Nilai palsu juga boleh digunakan sebagai singkatan untuk fungsi yang mengembalikan palsu.

Ganti bind()

Apabila 'pemilih' parameter kedua adalah batal, pada dasarnya tiada perbezaan dalam penggunaan antara on() dan bind(), jadi kita boleh berfikir bahawa on() hanya mempunyai satu lagi pilihan daripada parameter 'pemilih' bind() , so on() boleh menggantikan bind()

Ganti secara langsung()

Sebelum 1.4, saya percaya semua orang suka menggunakan live() kerana ia boleh mengikat acara kepada elemen semasa dan akan datang Sudah tentu, selepas 1.4, delegate() juga boleh melakukan perkara yang serupa. Prinsip live() adalah sangat mudah Ia mewakilkan acara melalui dokumen, jadi kami juga boleh menggunakan on() untuk mencapai kesan yang sama seperti live() dengan mengikat acara pada dokumen.

Cara menulis secara langsung()

Kod adalah seperti berikut:

$('#list li').live('click', '#list li', function() {
//function code here.
}); 

pada() kaedah penulisan

Kod adalah seperti berikut:

$(document).on('click', '#list li', function() {
//function code here.
});

Kuncinya di sini ialah 'pemilih' parameter kedua sedang berkuat kuasa. Ia bertindak sebagai penapis dan hanya unsur turunan unsur yang dipilih akan mencetuskan acara tersebut.

Ganti perwakilan()

delegate() telah diperkenalkan dalam 1.4, dengan tujuan mewakilkan isu-isu yang mengikat peristiwa unsur keturunan melalui unsur nenek moyang Pada tahap tertentu, ia mempunyai kelebihan yang sama untuk hidup(). Cuma live() diwakilkan melalui elemen dokumen, dan perwakilan boleh menjadi sebarang nod nenek moyang. Kaedah penulisan menggunakan on() untuk melaksanakan proksi pada asasnya adalah sama seperti delegate().

Cara menulis delegate()

Kod adalah seperti berikut:

$('#list').delegate('li', 'click', function() {
//function code here.
});

pada() kaedah penulisan

Kod adalah seperti berikut:

$('#list').on('click', 'li', function() {
//function code here.
});

Nampaknya susunan parameter pertama dan kedua diterbalikkan, tetapi semua yang lain pada asasnya sama.

Ringkasan

jQuery dilancarkan pada() untuk dua tujuan, satu adalah untuk menyatukan antara muka, dan satu lagi adalah untuk meningkatkan prestasi, jadi mulai sekarang, gunakan on() untuk menggantikan bind(), live(), dan perwakilan. Khususnya, jangan gunakan live() lagi, kerana ia sudah berada dalam senarai yang tidak digunakan dan akan dibunuh pada bila-bila masa. Jika anda hanya mengikat acara itu sekali, kemudian gunakan one(), tiada perubahan dalam ini.

kaedah jquery on() mengikat elemen dinamik

Tiada lagi perkara karut, izinkan saya siarkan kod untuk anda.

<div id="test">
<div class="evt">evt1</div>
</div>

Penggunaan yang salah Kaedah berikut hanya mengikat acara klik pada div pertama dengan evt kelas Div yang dibuat secara dinamik menggunakan append tidak terikat

<script>
// 先绑定事件再添加div
$('#test .evt').on('click', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>

Penggunaan yang betul adalah seperti berikut:

<script>
$('body').on('click', '#test .evt', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>