Dua kaedah untuk menyelesaikan masalah yang nod elemen ditambah secara dinamik tidak boleh mencetuskan peristiwa dalam jquery_jquery

Contohnya, semasa membuat ajax untuk membaca senarai mesej, terdapat butang balas di belakang setiap mesej dengan kelas "balas" Jika anda menggunakan $(".reply").click(function(){ // lakukan sesuatu... }), mungkin peristiwa klik butang balas dalam senarai yang dimuatkan kemudian melalui ajax akan menjadi tidak sah.

SebenarnyaCara paling mudah ialah dengan menulis onclick="" terus dalam teg, tetapi menulis dengan cara ini sebenarnya agak rendah nama kelas Tetapkan acara klik.

Terdapat dua penyelesaian kepada masalah yang menambahkan nod elemen secara dinamik dalam jquery tidak boleh mencetuskan peristiwa , seperti berikut:

Untuk mencapai kesan tunjuk cara yang lebih baik, anggap bahawa terdapat kod dengan struktur berikut di bawah kandungan halaman:

<p id="pLabel">新加一条</p>
<ul id="ulLabel">
 <li class="liLabel">aaa1</li>
 <li class="liLabel">aaa2</li>
 <li class="liLabel">aaa3</li>
</ul>
<script type="text/javascript">
$("#pLabel").click(function(){
 $("#ulLabel").append('<li class="liLabel">aaaQ</li>'); //动态像ul的末尾追加一个新元素
});
</script>

Kaedah 1: Gunakan secara langsung

Fungsi

live() akan mengikat satu atau lebih pengendali acara pada elemen yang dipilih dan menentukan fungsi untuk dijalankan apabila peristiwa ini berlaku. Fungsi live() digunakan pada elemen semasa dan masa hadapan yang sepadan dengan pemilih. Sebagai contoh, elemen dicipta secara dinamik melalui skrip.

Pelaksanaannya adalah seperti berikut:

$('.liLabel').live('click', function(){
 alert('OK');
});

Kaedah 2: Gunakan pada

Anda boleh mengikat acara melalui kaedah on, yang boleh diikat kepada induk atau badannya. Pelaksanaannya adalah seperti berikut:

$("#ulLabel").on('click','.liLabel',function(){
 alert('OK')
});
或者：
$("body").on('click','.liLabel',function(){
 alert('OK')
});

Sekarang anda boleh mencubanya untuk melihat sama ada masalah telah diselesaikan Saya harap artikel ini benar-benar dapat membantu anda.