Bagaimana untuk Melampirkan Pengendali Acara pada Elemen Ditambah Secara Dinamik dengan jQuery?

Cara Mengikat Peristiwa kepada Elemen Dinamik Menggunakan jQuery

Andaikan anda mempunyai kod jQuery sedia ada yang melampirkan pengendali acara pada elemen dengan kelas .myclass . Walau bagaimanapun, dalam senario di mana elemen ini ditambahkan secara dinamik pada halaman melalui AJAX atau DHTML, elemen yang baru dibuat tidak akan mempunyai pengendali klik yang dikaitkan dengannya.

Penyelesaian Masalah

Untuk mengendalikan isu ini, jQuery menawarkan beberapa pendekatan:

1. Kaedah .on() (jQuery 1.7 ):

Ganti kaedah .live() dengan .on() dan tentukan pemilih yang menggabungkan elemen induk dengan .myclass sebagai hujah.

$('body').on('click', 'a.myclass', function() {
    // do something
});

Ini akan melampirkan pengendali klik pada semua teg dengan kelas .myclass, tidak kira bila ia ditambahkan pada halaman.

2. Kaedah .delegate() (jQuery 1.6 - 1.8):

Kaedah .delegate() bertindak serupa dengan .on() tetapi memerlukan elemen induk dinyatakan dalam kurungan:

$('body').delegate('a.myclass', 'click', function() {
    // do something
});

Kedua-dua .on() dan .delegate() membenarkan pengendalian acara pada penambahan secara dinamik elemen.

Atas ialah kandungan terperinci Bagaimana untuk Melampirkan Pengendali Acara pada Elemen Ditambah Secara Dinamik dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!