Saya memiliki sedikit kode di mana saya mengulangi semua kotak pilih pada halaman dan mengikat suatu .hover
peristiwa kepada mereka untuk melakukan sedikit twiddling dengan lebar mereka mouse on/off
.
Ini terjadi pada halaman siap dan berfungsi dengan baik.
Masalah yang saya miliki adalah bahwa setiap kotak pilih yang saya tambahkan melalui Ajax atau DOM setelah loop awal tidak akan memiliki acara terikat.
Saya telah menemukan plugin ini ( jQuery Live Query Plugin ), tetapi sebelum saya menambahkan 5k ke halaman saya dengan sebuah plugin, saya ingin melihat apakah ada yang tahu cara untuk melakukan ini, baik dengan jQuery secara langsung atau dengan opsi lain.
Ada penjelasan yang bagus dalam dokumentasi
jQuery.fn.on
.Pendeknya:
Jadi dalam contoh berikut
#dataTable tbody tr
harus ada sebelum kode dihasilkan.Jika HTML baru sedang disuntikkan ke halaman, lebih baik menggunakan acara yang didelegasikan untuk melampirkan pengendali acara, seperti yang dijelaskan selanjutnya.
Peristiwa yang didelegasikan memiliki keuntungan bahwa mereka dapat memproses peristiwa dari elemen turunan yang ditambahkan ke dokumen di lain waktu. Misalnya, jika tabel ada, tetapi baris ditambahkan secara dinamis menggunakan kode, berikut ini akan menanganinya:
Selain kemampuan mereka untuk menangani acara pada elemen turunan yang belum dibuat, keuntungan lain dari acara yang didelegasikan adalah potensi mereka untuk overhead yang jauh lebih rendah ketika banyak elemen harus dipantau. Pada tabel data dengan 1.000 baris di dalamnya
tbody
, contoh kode pertama menempel handler ke 1.000 elemen.Pendekatan peristiwa yang didelegasikan (contoh kode kedua) melampirkan pengendali acara ke hanya satu elemen
tbody
, dan, dan acara hanya perlu menggembungkan satu tingkat (dari yang dikliktr
ketbody
).Catatan: Acara yang didelegasikan tidak berfungsi untuk SVG .
sumber
tr
ke pemilih yang sesuai, seperti'input[type=checkbox]'
, dan ini akan ditangani secara otomatis untuk baris yang baru dimasukkan?Ini adalah solusi JavaScript murni tanpa perpustakaan atau plugin:
di mana
hasClass
adalahLive demo
Penghargaan untuk Dave dan Sime Vidas
Menggunakan JS yang lebih modern,
hasClass
dapat diimplementasikan sebagai:sumber
Element.classList
tidak didukung didukung pada peramban yang lebih lama. Misalnya, IE <9.Anda dapat menambahkan acara ke objek saat Anda membuatnya. Jika Anda menambahkan acara yang sama ke beberapa objek pada waktu yang berbeda, membuat fungsi bernama mungkin merupakan cara yang harus dilakukan.
sumber
Anda bisa dengan mudah membungkus panggilan acara mengikat Anda ke dalam suatu fungsi dan kemudian memanggilnya dua kali: sekali pada dokumen siap dan sekali setelah acara Anda yang menambahkan elemen DOM baru. Jika Anda melakukannya, Anda ingin menghindari mengikat acara yang sama dua kali pada elemen yang ada sehingga Anda harus melepaskan ikatan peristiwa yang ada atau (lebih baik) hanya mengikat ke elemen DOM yang baru dibuat. Kode akan terlihat seperti ini:
sumber
Cobalah untuk menggunakannya
.live()
daripada.bind()
; yang.live()
akan mengikat.hover
ke kotak centang Anda setelah permintaan mengeksekusi Ajax.sumber
live()
ini ditinggalkan dalam versi 1.7 yang mendukungon
dan dihapus dalam versi 1.9.Mengikat acara pada elemen yang dibuat secara dinamis
Elemen tunggal:
Elemen anak:
Perhatikan yang ditambahkan
*
. Suatu peristiwa akan dipicu untuk semua anak dari elemen itu.Saya perhatikan bahwa:
Itu tidak berfungsi lagi, tetapi berhasil sebelumnya. Saya telah menggunakan jQuery dari Google CDN , tetapi saya tidak tahu apakah mereka mengubahnya.
sumber
Anda dapat menggunakan metode live () untuk mengikat elemen (bahkan yang baru dibuat) ke acara dan penangan, seperti acara onclick.
Berikut adalah contoh kode yang saya tulis, di mana Anda dapat melihat bagaimana metode live () mengikat elemen yang dipilih, bahkan yang baru dibuat, ke acara:
sumber
Saya lebih suka menggunakan pemilih dan saya menerapkannya pada dokumen.
Ini mengikat dirinya pada dokumen dan akan berlaku untuk elemen yang akan diberikan setelah pemuatan halaman.
Sebagai contoh:
sumber
selector
variabel, ketika itu harus berisi string atau objek Elemen yang Anda bisa langsung lewati ke argumenon()
Solusi lain adalah menambahkan pendengar saat membuat elemen. Alih-alih memasukkan pendengar ke dalam tubuh, Anda menempatkan pendengar dalam elemen pada saat Anda membuatnya:
sumber
myElement.append('body');
harusmyElement.appendTo('body');
. Di sisi lain, jika tidak perlu untuk penggunaan lebih lanjut dari variabelmyElement
lebih mudah dan lebih pendek dengan cara ini:$('body').append($('<button/>', { text: 'Go to Google!' }).bind( 'click', goToGoogle));
Coba seperti ini -
sumber
Perhatikan kelas "MAIN" elemen yang ditempatkan, misalnya,
Dalam skenario di atas, objek UTAMA yang akan ditonton jQuery adalah "wadah".
Kemudian Anda pada dasarnya akan memiliki nama elemen di bawah wadah seperti
ul
,li
, danselect
:sumber
Ini dilakukan oleh delegasi acara . Acara akan mengikat elemen kelas pembungkus tetapi akan didelegasikan ke elemen kelas pemilih. Begini Cara kerjanya.
catatan:
elemen kelas wrapper bisa apa saja ex. dokumen, tubuh atau bungkus Anda. Wrapper seharusnya sudah ada . Namun,
selector
tidak perlu disajikan pada waktu pemuatan halaman. Itu mungkin datang kemudian dan acara akan mengikatselector
tanpa gagal .sumber
Anda bisa menggunakannya
atau
kedua metode ini setara tetapi memiliki urutan parameter yang berbeda.
lihat: Acara Delegasi jQuery
sumber
delegate()
sekarang sudah ditinggalkan. Jangan gunakan itu.Anda dapat melampirkan acara ke elemen saat dibuat secara dinamis menggunakan
jQuery(html, attributes)
.sumber
Inilah mengapa elemen yang dibuat secara dinamis tidak merespons klik:
Sebagai solusinya, Anda harus mendengarkan semua klik dan memeriksa elemen sumber:
Ini disebut "Delegasi Acara". Berita bagus, ini fitur bawaan di jQuery :-)
sumber
Setiap p arent yang ada pada saat acara terikat dan jika halaman Anda secara dinamis membuat elemen dengan tombol nama kelas Anda akan mengikat acara ke induk yang sudah ada
sumber
Bind event ke induk yang sudah ada:
sumber
Gunakan
.on()
metode jQuery http://api.jquery.com/on/ untuk melampirkan penangan acara ke elemen langsung.Juga pada
.live()
metode versi 1.9 dihapus.sumber
Saya lebih suka memiliki pendengar acara yang ditempatkan dalam mode fungsi modular daripada membuat skrip
document
pendengar acara tingkat. Jadi, saya suka di bawah ini. Catatan, Anda tidak bisa terlalu banyak berlangganan elemen dengan pendengar acara yang sama jadi jangan khawatir melampirkan pendengar lebih dari sekali - hanya satu batang.sumber
Solusi fleksibel lain untuk membuat elemen dan mengikat acara ( sumber )
Catatan: Ini akan membuat instance handler event untuk setiap elemen (dapat memengaruhi kinerja saat digunakan dalam loop)
sumber
sumber
Saya sedang mencari solusi untuk mendapatkan
$.bind
dan$.unbind
bekerja tanpa masalah dalam elemen yang ditambahkan secara dinamis.Seperti pada () buat trik untuk melampirkan acara, untuk membuat ikatan yang tidak mengikat pada yang saya datangi:
sumber