Bagaimanakah Saya Boleh Mengendalikan Peristiwa daripada Elemen Dijana Secara Dinamik dalam JavaScript?-tutorial js-php.cn

Bagaimanakah Saya Boleh Mengendalikan Peristiwa daripada Elemen Dijana Secara Dinamik dalam JavaScript?

Mary-Kate Olsen

Lepaskan： 2024-12-12 20:58:10

asal

652 orang telah melayarinya

How Can I Handle Events from Dynamically Generated Elements in JavaScript?

Mengendalikan Acara daripada Elemen Dijana Secara Dinamik

Dalam bidang pembangunan web, pengendalian acara daripada elemen yang dijana secara dinamik boleh memberikan cabaran. Artikel ini menangani isu menangkap peristiwa yang dicetuskan oleh unsur yang dicipta selepas pemuatan halaman awal.

Masalahnya

Pertimbangkan senario di mana anda mempunyai

elemen dengan id "modal" yang dimuatkan secara dinamik ke dalam halaman menggunakan kaedah load() jQuery. Modal ini mengandungi elemen input yang anda ingin pantau untuk input pengguna. Walau bagaimanapun, apabila anda cuba menangkap nilai input menggunakan kaedah keyup, anda menghadapi masalah: acara tidak lagi menyala untuk elemen yang dijana secara dinamik.

Penyelesaian

Kunci untuk menyelesaikan isu ini terletak pada delegasi acara. Delegasi acara melibatkan pengendali acara yang mengikat kepada unsur nenek moyang statik kandungan yang dijana secara dinamik. Ini membolehkan acara menggelembung ke nenek moyang statik, di mana ia boleh dikendalikan walaupun untuk elemen yang dicipta selepas pemuatan halaman awal.

jQuery menyediakan dua kaedah untuk perwakilan acara: .on() dan .delegate( ). Untuk versi 1.7 dan ke atas, kaedah yang disyorkan ialah .on():

$('#modal').on('keyup', 'input', function() {
    // Handle the event
});

Salin selepas log masuk

Untuk versi 1.6 dan ke bawah, gunakan .delegate():

$('#modal').delegate('input', 'keyup', function() {
    // Handle the event
});

Salin selepas log masuk

Dalam contoh ini, pengendali acara terikat kepada elemen modal. Apabila mana-mana elemen input dalam modal diklik, pengendali acara akan dicetuskan kerana acara menggelembung ke modal.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengendalikan Peristiwa daripada Elemen Dijana Secara Dinamik dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!