Bagaimanakah Saya Boleh Melampirkan Pendengar Acara pada Elemen Dicipta Secara Dinamik dalam JavaScript?

Melampirkan Peristiwa pada Elemen Dicipta Secara Dinamik dalam JavaScript

Apabila cuba menambah elemen HTML secara dinamik dan menetapkan pendengar acara kepada mereka, mungkin akan ditemui isu di mana peristiwa tidak mencetuskan. Ini kerana pendengar acara dilampirkan sebelum elemen dinamik ditambahkan pada DOM.

Untuk menangani perkara ini, satu penyelesaian ialah menggunakan delegasi acara. Ini melibatkan pendaftaran pendengar acara pada elemen peringkat lebih tinggi yang akan mengendalikan klik pada semua elemen kanak-kanak. Ini membenarkan elemen ditambah secara dinamik untuk mencetuskan peristiwa walaupun ia tidak hadir semasa pendengar acara dilampirkan.

Contoh Kod

Pertimbangkan kod berikut:

document.addEventListener("click", function(e) {
  const target = e.target.closest("#btnPrepend");

  if (target) {
    // Do something with `target`.
  }
});

Dalam kod ini, kami telah menambahkan pendengar acara pada objek dokumen, yang akan mendengar klik pada mana-mana elemen. Apabila klik berlaku, kami menggunakan kaedah terdekat() untuk menyemak sama ada sasaran klik ialah elemen anak dengan ID "btnPrepend." Jika ya, kita boleh melakukan tindakan yang diingini pada butang.

Pendekatan ini berfungsi kerana acara diwakilkan kepada objek dokumen, yang wujud sebelum sebarang elemen dinamik ditambahkan. Dengan menyemak kewujudan elemen "btnPrepend" dalam pengendali acara, kami memastikan acara itu hanya akan menyala apabila butang hadir.

Menggunakan jQuery

jQuery memudahkan delegasi acara dengan kaedah on():

$(document).on("click", "#btnPrepend", function() {
  // Do something with `$(this)`.
});

Di sini, kami telah mewakilkan klik acara ke objek dokumen dan tentukan pemilih untuk butang yang ingin kami kendalikan. Ini membolehkan kod yang lebih ringkas dan boleh dibaca.

Kesimpulan

Ingat untuk mempertimbangkan perwakilan acara apabila bekerja dengan elemen yang dicipta secara dinamik. Ia menyediakan cara yang mantap untuk mengendalikan acara, memastikan ia dicetuskan dengan betul walaupun apabila unsur yang dikaitkan dengannya ditambah selepas pendengar acara dilampirkan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melampirkan Pendengar Acara pada Elemen Dicipta Secara Dinamik dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!