Mengapa Pengendali Acara JavaScript Gagal Mencetuskan Elemen yang Dilampirkan?

Mengapa Pengendali Acara JavaScript Tidak Mencetuskan Elemen yang Dilampirkan

Apabila anda menambahkan elemen baharu pada DOM, seperti dalam HTML yang disediakan kod, pengendali acara JavaScript yang ditakrifkan sebelum ini mungkin tidak mengenali elemen baharu. Ini boleh membawa kepada tingkah laku yang tidak dijangka, kerana kod JavaScript bergantung pada kehadiran elemen tertentu untuk mencetuskan acara.

Untuk menyelesaikan isu ini, anda perlu menggunakan delegasi acara. Perwakilan acara ialah teknik di mana anda melampirkan pengendali acara pada elemen induk yang wujud pada masa halaman dimuatkan. Apabila peristiwa berlaku pada elemen anak yang dilampirkan kemudian, acara itu akan menggelembung ke elemen induk dan pengendali peristiwa yang dilampirkan pada induk akan dicetuskan.

Dalam kod yang disediakan, anda telah melampirkan klik pengendali acara kepada elemen .races. Walau bagaimanapun, apabila elemen baharu ditambahkan pada DOM, jQuery tidak mengenalinya kerana ia tidak hadir semasa jQuery dimulakan pada pemuatan halaman.

Untuk membetulkannya, anda boleh mewakilkan acara klik kepada elemen induk terdekat yang wujud pada pemuatan halaman, seperti div kontena .races. Berikut ialah kod yang dikemas kini:

$(document).ready(function(){
  $('.races-container').on('click', '.races', function(e){
    ... // Your event handler code
  })
});

Dengan mewakilkan acara kepada div .races-container, jQuery akan dapat mengendalikan klik pada kedua-dua elemen .races sedia ada dan yang baru ditambah, memastikan pengendali acara anda dicetuskan dengan betul.

Ingat bahawa delegasi acara ialah teknik biasa apabila bekerja dengan kandungan yang dijana secara dinamik, kerana ia membolehkan anda mengendalikan acara pada elemen yang mungkin tidak wujud pada masa pemuatan halaman.

Atas ialah kandungan terperinci Mengapa Pengendali Acara JavaScript Gagal Mencetuskan Elemen yang Dilampirkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!