Mengapa Peristiwa JavaScript Saya Tidak Terbakar Selepas Menambahkan Elemen Baharu?

JavaScript Tidak Menyala Selepas Dilampirkan

Ringkasan Masalah

Apabila menambahkan elemen input baharu pada halaman web menggunakan JavaScript, peristiwa berikutnya mungkin tidak dicetuskan. Ini kerana jQuery tidak mengetahui elemen yang baru ditambah ini.

Delegasi Acara dan Bubbling

jQuery berfungsi dengan mendaftarkan pengendali acara untuk elemen tertentu. Walau bagaimanapun, apabila elemen baharu ditambah secara dinamik, pengendali acara ini tidak dapat mengenalinya. Untuk menyelesaikan masalah ini, perwakilan acara digunakan.

Delegasi acara melibatkan mendengar acara pada elemen induk yang sudah ada dalam DOM pada masa jQuery dimuatkan. Apabila peristiwa berlaku dalam elemen anak bersarang, ia menggelembung ke elemen induk, di mana pengendali acara boleh menangkapnya.

Penyelesaian Kod

Untuk menggunakan perwakilan acara dalam kod yang disediakan, pengendali acara untuk butang harus diubah suai untuk menggunakan kaedah on(). Kaedah ini membenarkan pendengaran acara diwakilkan kepada elemen induk.

$(document).on('click', '.races', function(e) {
  // ... rest of the code
});

Dengan menggunakan $(document).on(), acara akan diwakilkan kepada objek dokumen, yang terdapat dalam DOM semasa beban halaman. Ini memastikan acara daripada elemen .races yang baru ditambah akan ditangkap dan dikendalikan oleh pengendali acara.

Atas ialah kandungan terperinci Mengapa Peristiwa JavaScript Saya Tidak Terbakar Selepas Menambahkan Elemen Baharu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!