Bagaimanakah Saya Boleh Mencegah Kehilangan Pendengar Acara Apabila Mengubah suai innerHTML?

Memelihara Pendengar Acara Apabila Menambahkan pada innerHTML

Apabila menugaskan kepada innerHTML nod induk, pengendali acara yang dilampirkan pada keturunan mungkin dimusnahkan. Sebagai contoh, pertimbangkan kod di bawah:

<span></span>

mydiv = document.getElementById("mydiv");
mydiv.innerHTML += "bar";

Di sini, pengendali acara onclick yang dilampirkan pada rentang yang mengandungi "foo" dimusnahkan selepas tugasan kepada mydiv.innerHTML.

Untuk mengelakkan isu ini, gunakan kaedah .insertAdjacentHTML() dan bukannya .innerHTML. Kaedah ini mengekalkan pendengar acara dan disokong oleh semua penyemak imbas utama.

var html_to_insert = "<p>New paragraph</p>";
document.getElementById('mydiv').insertAdjacentHTML('beforeend', html_to_insert);

Argumen 'sebelumnya' menentukan tempat dalam elemen untuk memasukkan HTML kandungan. Pilihan lain termasuk 'beforebegin', 'afterbegin' dan 'afterend'.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencegah Kehilangan Pendengar Acara Apabila Mengubah suai innerHTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!