Mengapa Pendengar Acara JavaScript Saya Tidak Berfungsi pada Elemen Dicipta Secara Dinamik, dan Bagaimana Saya Boleh Membetulkannya Menggunakan Perwakilan Acara?

Pengendalian Acara Dinamik dalam JavaScript

Apabila bekerja dengan aplikasi web, selalunya perlu mencipta dan memanipulasi elemen pada halaman secara dinamik. Walau bagaimanapun, melampirkan pengendali acara pada elemen yang dicipta secara dinamik boleh mencabar.

Isunya

Dalam coretan kod yang disediakan, butang HTML dicipta secara dinamik dan dimasukkan ke dalam DOM . Pendengar acara kemudian dilampirkan pada butang ini, tetapi pengendali acara tidak dicetuskan apabila butang itu diklik.

Delegasi Acara

Masalahnya ialah pendengar acara dilampirkan pada butang sebelum ia ditambahkan pada DOM. Apabila butang dibuat secara dinamik, ia dilampirkan pada DOM kemudian, tetapi panggilan pendengar acara telah berlaku.

Penyelesaian untuk perkara ini ialah perwakilan acara. Delegasi acara melibatkan melampirkan pendengar acara pada elemen induk dan bukannya terus pada elemen sasaran. Apabila peristiwa berlaku, acara itu disebarkan ke atas pepohon DOM sehingga ia mencapai elemen induk dengan pendengar acara yang dilampirkan.

Contoh

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

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

Dalam contoh ini , kaedah terdekat() digunakan untuk menentukan sama ada peristiwa klik berlaku dalam elemen #btnPrepend atau keturunannya. Jika ya, pembolehubah sasaran akan merujuk elemen yang telah diklik.

Alternatif jQuery

jQuery memudahkan delegasi acara dengan kaedah on().

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

Kesimpulan

Delegasi acara menyediakan kaedah yang boleh dipercayai untuk melampirkan pengendali acara pada elemen yang dicipta secara dinamik. Dengan melampirkan pendengar acara pada elemen induk, ia memastikan pengendali acara akan dicetuskan walaupun elemen sasaran ditambahkan pada DOM kemudian.

Atas ialah kandungan terperinci Mengapa Pendengar Acara JavaScript Saya Tidak Berfungsi pada Elemen Dicipta Secara Dinamik, dan Bagaimana Saya Boleh Membetulkannya Menggunakan Perwakilan Acara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!