Pengikatan peristiwa unsur dinamik: Bagaimana untuk mengikat acara kepada elemen yang dicipta secara dinamik?

Question

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.

Answer 1

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

yang diklik ke

). Nota: Acara perwakilan tidak berfungsi dengan SVG🎜. 🎜

Answer 2

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)。每次在此元素或后代元素之一上触发事件时，都会触发此 jQuery 处理程序。然后，处理程序检查触发事件的元素是否与您的选择器匹配（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

, dan dialih keluar sepenuhnya dalam 1.9.

Tandatangan:

$(selector).live( eventName, function(){} );

on()...boleh digantikan dengan

---

tandatangan berikut:

$(document).on( eventName, selector, function(){} );

dosomething 的元素，您可以将事件绑定到已经存在的父级（这是问题的核心，您需要一些东西存在绑定到，不绑定到动态内容），这可以（也是最简单的选项）是 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. Tetapi perlu diingat bahawa 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 🎜