Pengikatan peristiwa pada elemen yang dicipta secara dinamik?

Question

Saya mempunyai beberapa kod di mana saya melingkari semua kotak pilihan pada halaman dan mengikat acara .tuding kepada mereka untuk mengubah saiznya pada ;/kod>.

Ini berlaku apabila halaman sudah sedia dan berfungsi dengan betul.

Masalah yang saya hadapi ialah mana-mana kotak pilihan yang ditambahkan melalui Ajax atau DOM selepas gelung awal tidak mempunyai peristiwa yang terikat kepadanya.

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.

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 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 tbody , contoh kod pertama melampirkan pengendali kepada 1,000 elemen.

Kaedah acara perwakilan

(contoh kod kedua) hanya melampirkan pengendali acara pada satu elemen, iaitu tbody，并且事件只需要向上冒泡一层（从单击的 tr 到 tbody dan acara hanya perlu naik satu tahap (daripada tr yang diklik kepada

).

Nota: Acara perwakilan tidak berfungsi dengan SVG< /p>. 🎜

Answer 2

Bermula dari jQuery 1.7, anda harus menggunakan jQuery.fn.on dengan parameter pemilih diisi:

$(staticAncestors).on(eventName, dynamicChild, function() {});

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()< /代码>:

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

Walau bagaimanapun, live() 在 1.7 中已被弃用，取而代之的是 on()，并在 1.9 中完全删除。 live()live() telah ditamatkan dalam 1.7, digantikan dengan

on() dan dialih keluar sepenuhnya dalam 1.9.

live() Tandatangan:

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

on()...boleh digantikan dengan yang berikut

on()

---

Tandatangan:

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

dosomething 的元素，您可以将该事件绑定到已经存在的父级（这是该事件的核心）这里的问题是，你需要一些存在的东西来绑定，而不是绑定到动态内容），这可以是（也是最简单的选项）是document。但请记住 document Sebagai contoh, jika halaman anda mencipta unsur secara dinamik dengan nama kelas

dosomething, anda boleh mengikat acara itu kepada

ibu 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) ialah

dokumen. Tetapi perlu diingat bahawa

dokumen mungkin bukan yang paling pilihan yang cekap 🎜. 🎜

$(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 🎜

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>