Saya mempunyai beberapa kod di mana saya mengulangi semua kotak pilihan pada halaman dan membuat beberapa pelarasan .hover
事件綁定到它們,以在 mouse on/off
pada lebarnya.
Ini berlaku selepas halaman siap dan berfungsi dengan baik.
Masalah yang saya hadapi ialah mana-mana kotak pilihan yang ditambahkan melalui Ajax atau DOM selepas gelung awal tidak mempunyai peristiwa terikat.
Saya telah menemui 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 pilihan lain.
jQuery.fn.on
mempunyai penjelasan yang baik dalam dokumentasi.
Ringkasnya:
Jadi dalam contoh di bawah #dataTable tbody tr
mesti wujud sebelum kod dijana.
$("#dataTable tbody tr").on("click", function(event){ console.log($(this).text()); });
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:
$("#dataTable tbody").on("click", "tr", function(event){ console.log($(this).text()); });
Selain dapat mengendalikan acara pada elemen keturunan yang 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 tbody
, contoh kod pertama melampirkan pengendali kepada 1,000 elemen.
Kaedah acara perwakilan (contoh kod kedua) hanya melampirkan pengendali acara pada satu elemen tbody
,并且該事件只需要向上冒泡一級(從單擊的 tbody
到 tbody
dan acara hanya perlu naik satu tahap (dari
). Nota: Acara perwakilan tidak berfungsi dengan SVG??. ??
Bermula dari jQuery 1.7, anda harus menggunakan jQuery.fn.on
dan mengisi parameter pemilih:
$(staticAncestors).on(eventName, dynamicChild, function() {});
Arahan:
Ini dipanggil delegasi acara dan ia berfungsi seperti ini. Acara ini dilampirkan pada induk statik (staticAncestors
)。每次在此元素或后代元素之一上觸發(fā)事件時,都會觸發(fā)此 jQuery 處理程序。然后,處理程序檢查觸發(fā)事件的元素是否與您的選擇器匹配(dynamicChild
) elemen yang harus dikendalikan. Apabila terdapat perlawanan, fungsi pengendali tersuai anda dilaksanakan.
Sehingga itu, kaedah yang disyorkan ialah menggunakan live()
:
$(selector).live( eventName, function(){} );
Walau bagaimanapun, live()
在 1.7 中已被棄用,取而代之的是 on()
,并在 1.9 中完全刪除。 live()
telah ditamatkan dalam 1.7, digantikan dengan
Tandatangan:
$(selector).live( eventName, function(){} );
on()
...boleh digantikan dengan
$(document).on( eventName, selector, function(){} );
dosomething
的元素,您可以將事件綁定到已經(jīng)存在的父級(這是問題的核心,您需要一些東西存在綁定到,不綁定到動態(tài)內(nèi)容),這可以(也是最簡單的選項)是 document
。但請記住 document
Sebagai contoh, jika halaman anda mencipta elemen secara dinamik dengan nama kelas (tidak terikat kepada kandungan dinamik), ini boleh (dan merupakan pilihan yang paling mudah) menjadi dokumen
mungkin bukan Pilihan yang paling berkesan .
$(document).on('mouseover mouseout', '.dosomething', function(){ // what you want to happen when mouseover and mouseout // occurs on elements that match '.dosomething' });Mana-mana ibu bapa yang wujud semasa acara terikat akan melakukannya. Contohnya
$('.buttons').on('click', 'button', function(){ // do something here });Berlaku untuk ??