Bagaimana untuk Melampirkan Pendengar Acara pada Elemen Dicipta Secara Dinamik dalam JavaScript?

Melampirkan Acara pada Elemen Dicipta Secara Dinamik dalam JavaScript

Apabila cuba menambahkan elemen dinamik pada senarai yang dibuat secara dinamik dan menambah pendengar acara pada elemen yang dicipta secara dinamik, peristiwa itu mungkin tidak menyala. Ini kerana elemen tidak tersedia pada masa pendengar acara dilampirkan.

Untuk menangani isu ini, perwakilan acara boleh digunakan. Teknik ini melibatkan melampirkan pendengar acara pada elemen peringkat lebih tinggi yang mengandungi elemen yang dicipta secara dinamik.

Sebagai contoh, pertimbangkan kod berikut:

document.addEventListener("click", function(e) {
  const target = e.target.closest("#btnPrepend"); // or any other selector

  if (target) {
    // Do something with 'target'
  }
});

Dalam contoh ini, pendengar acara ialah dilampirkan pada objek dokumen, mendengar peristiwa klik. Fungsi terdekat() digunakan untuk menentukan sama ada peristiwa klik berasal daripada elemen dengan pemilih #btnPrepend (atau mana-mana pemilih yang ditentukan lain). Jika perlawanan ditemui, acara dikendalikan dengan sewajarnya.

Sebagai alternatif, jQuery menyediakan pendekatan yang dipermudahkan kepada perwakilan acara:

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

Kaedah ini melampirkan pendengar acara pada objek dokumen, mendengar untuk acara klik khusus pada elemen dengan pemilih #btnPrepend.

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