Pengendalian Acara jQuery: .live() vs. .on() untuk Elemen Dimuat Secara Dinamik?

Pengendalian Acara dengan HTML Dinamik: jQuery .live() vs .on()

Apabila bekerja dengan HTML yang dimuatkan secara dinamik, tambah pengendali acara kepada elemen yang baru dicipta boleh mencabar. Soalan ini meneroka perbezaan antara kaedah .live() dan .on() jQuery untuk melampirkan peristiwa klik pada elemen yang dimuatkan secara dinamik.

Dalam jQuery v1.7.1, .live() ditamatkan. Sebaliknya, .on() disyorkan untuk pengendalian acara dengan kandungan yang dibuat secara dinamik. Walau bagaimanapun, penyoal menghadapi situasi di mana .on() gagal mendaftarkan acara klik untuk elemen yang dimuatkan secara dinamik dengan $('#parent').load().

Kaedah yang betul untuk senario ini ialah perwakilan acara, dicapai menggunakan .on(). Perwakilan acara melibatkan melampirkan pengendali acara pada elemen induk yang wujud sebelum kandungan dinamik dimuatkan. Pengendali acara kemudiannya dikonfigurasikan untuk mendengar acara yang berasal daripada elemen yang dicipta secara dinamik.

Sebagai contoh, untuk melampirkan pengendali klik pada elemen #anak yang dimuatkan secara dinamik ke dalam #induk:

$('#parent').on("click", "#child", function() {});

Pendekatan ini membolehkan pengendali acara menangkap acara klik pada elemen #kanak-kanak, walaupun elemen itu tidak wujud apabila pengendali acara dilampirkan. Ini kerana acara klik berbuih sehingga elemen #induk, yang mempunyai pengendali acara yang ditakrifkan untuk elemen #anak.

Delegasi acara menyelesaikan isu penambahan pengendali klik pada elemen yang dicipta secara dinamik dan merupakan pendekatan yang disyorkan apabila bekerja dengan HTML yang dimuatkan secara dinamik.

Atas ialah kandungan terperinci Pengendalian Acara jQuery: .live() vs. .on() untuk Elemen Dimuat Secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!