Pengikatan peristiwa pada elemen yang dicipta secara dinamik?
P粉440453689
2023-08-23 15:04:33
<p>Saya mempunyai beberapa kod di mana saya melingkari semua kotak pilihan pada halaman dan mengikat acara <kod>.tuding</code> kepada mereka untuk mengubah saiznya pada <kod> ;/kod>. </p>
<p>Ini berlaku apabila halaman sudah sedia dan berfungsi dengan betul. </p>
<p>Masalah yang saya hadapi ialah mana-mana kotak pilihan yang ditambahkan melalui Ajax atau DOM selepas gelung awal tidak mempunyai peristiwa yang terikat kepadanya. </p>
<p>Saya telah menjumpai pemalam ini (jQuery Live Query Plugin), tetapi sebelum saya menggunakan pemalam itu untuk menambah 5k lagi pada halaman saya, saya ingin melihat sama ada sesiapa tahu cara melakukannya, sama ada secara terus menggunakan jQuery Atau melalui yang lain pilihan. </p>
jQuery.fn.on
mempunyai penjelasan yang baik dalam dokumentasi 一个>.Ringkasnya:
Jadi, dalam contoh di bawah,
#dataTable tbody tr
mesti wujud sebelum kod dijana.Jika HTML baharu disuntik ke dalam halaman, sebaiknya lampirkan pengendali acara menggunakan acara yang diwakilkan, seperti yang diterangkan di bawah.
Kelebihan acara yang diwakilkan ialah mereka boleh mengendalikan acara daripada unsur keturunan yang kemudiannya ditambahkan pada dokumen. Sebagai contoh, jika jadual wujud tetapi baris ditambah secara dinamik menggunakan kod, perkara berikut akan mengendalikannya:
Selain dapat mengendalikan acara pada elemen keturunan yang masih belum dicipta, satu lagi kelebihan acara yang diwakilkan ialah ia boleh mengurangkan overhed apabila banyak elemen perlu dipantau. Pada jadual data dengan 1,000 baris dalam
Kaedah acara perwakilantbody
, contoh kod pertama melampirkan pengendali kepada 1,000 elemen.(contoh kod kedua) hanya melampirkan pengendali acara pada satu elemen, iaitu
).tbody
,并且事件只需要向上冒泡一层(从单击的tr
到tbody
dan acara hanya perlu naik satu tahap (daripadatr
yang diklik kepadaNota: Acara perwakilan tidak berfungsi dengan SVG. 🎜
Bermula dari jQuery 1.7, anda harus menggunakan
jQuery.fn.on
dengan parameter pemilih diisi:Arahan:
Ini dipanggil delegasi acara dan ia berfungsi seperti ini. Peristiwa ini dilampirkan pada padanan induk statik (
staticAncestors
)。每次在此元素或后代元素之一上触发事件时,都会触发此 jQuery 处理程序。然后,处理程序检查触发事件的元素是否与您的选择器 (dynamicChild
) bagi elemen yang harus dikendalikan. Apabila terdapat perlawanan, fungsi pengendali tersuai anda dilaksanakan.Sebelum ini, kaedah yang disyorkan adalah menggunakan
live()
:Walau bagaimanapun,
on() dan dialih keluar sepenuhnya dalam 1.9.live()
在 1.7 中已被弃用,取而代之的是on()
,并在 1.9 中完全删除。live()
live() telah ditamatkan dalam 1.7, digantikan denganlive() Tandatangan:
on()on()
...boleh digantikan dengan yang berikutTandatangan:
dosomething
的元素,您可以将该事件绑定到已经存在的父级(这是该事件的核心)这里的问题是,你需要一些存在的东西来绑定,而不是绑定到动态内容),这可以是(也是最简单的选项)是document
。但请记住document
Sebagai contoh, jika halaman anda mencipta unsur secara dinamik dengan nama kelas dosomething, anda boleh mengikat acara itu kepadaibu bapa yang sudah sedia ada
(yang merupakan teras acara) Masalahnya di sini ialah anda memerlukan sesuatu yang sedia ada untuk mengikat, bukannya mengikat kepada kandungan dinamik), ini boleh (dan pilihan paling mudah) ialahdokumen. Tetapi perlu diingat bahawa
dokumen mungkin bukan yang paling pilihan yang cekap 🎜. 🎜 🎜Mana-mana ibu bapa yang wujud semasa acara terikat akan melakukannya. Contohnya 🎜 🎜Berlaku untuk 🎜