Saya menggunakan jQuery v.1.7.1 di mana metode .live () tampaknya sudah usang.
Masalah yang saya alami adalah ketika memuat dinamis html ke dalam elemen menggunakan:
$('#parent').load("http://...");
Jika saya mencoba dan menambahkan acara klik setelah itu tidak mendaftar acara menggunakan salah satu dari metode ini:
$('#parent').click(function() ...);
atau
// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...);
Apa cara yang benar untuk mencapai fungsi ini? Tampaknya hanya berfungsi dengan .live () untuk saya, tetapi saya seharusnya tidak menggunakan metode itu. Perhatikan bahwa #child adalah elemen yang dimuat secara dinamis.
Terima kasih.
.live()
ia memberitahu Anda cara menulis ulang penggunaan yang ada.live()
untuk digunakan.delegate()
atau.on()
(tergantung pada apakah Anda menggunakan versi 1.7+ atau tidak). Perhatikan bahwa jika Anda menambahkan pawang dengan.click()
"sesudahnya" seperti yang Anda sebutkan, yaitu, setelah memuat elemen secara dinamis, itu akan berfungsi - satu-satunya masalah yang mencoba untuk ditetapkan dengan.click()
sebelum memuat elemen secara dinamis.Jawaban:
Jika Anda ingin penangan klik berfungsi untuk elemen yang dimuat secara dinamis, maka Anda mengatur pengendali kejadian pada objek induk (yang tidak dimuat secara dinamis) dan memberikannya pemilih yang cocok dengan objek dinamis Anda seperti ini:
Penangan acara akan dilampirkan ke
#parent
objek dan kapan saja acara klik muncul hingga berasal dari mana#child
, itu akan memecat penangan klik Anda. Ini disebut penanganan acara yang didelegasikan (penanganan acara didelegasikan ke objek induk).Ini dilakukan dengan cara ini karena Anda dapat melampirkan peristiwa ke
#parent
objek bahkan ketika#child
objek belum ada, tetapi ketika nanti ada dan diklik, acara klik akan menggelembung ke#parent
objek, ia akan melihat bahwa itu berasal#child
dan ada pengendali acara untuk mengklik#child
dan memecat acara Anda.sumber
live()
vson()
tetapi malam ini saya memutuskan lagi untuk mencoba, dan penjelasan Anda segera mengungkapkan apa yang telah saya lewatkan selama ini. Terima kasih!mouseenter
danmouseleave
acara serta menguji di dalam handler mana yang dipicu. Acara "hover" semu jQuery tidak tersedia dengan delegasi.Coba ini:
Dari
$.on()
dokumentasi:Anda
#child
elemen tidak ada ketika Anda menelepon$.on()
di atasnya, sehingga acara ini tidak terikat (seperti$.live()
).#parent
Namun, memang ada, jadi mengikat acara itu baik-baik saja.Argumen kedua dalam kode saya di atas bertindak sebagai 'filter' untuk memicu hanya jika acara tersebut menggelembung
#parent
dari#child
.sumber
.load()
metode - bukan dari kode setelah.load()
metode.#child
hanya diketahui dimuat ketika penangan sukses benar-benar dieksekusi dan bukan sebelumnya.$(document).on('click', '.selector', function() { /* do stuff */ });
EDIT: Saya memberikan sedikit informasi tentang cara kerjanya, karena ... kata-kata. Dengan contoh ini, Anda menempatkan pendengar di seluruh dokumen.
Ketika Anda
click
pada elemen apa pun yang cocok.selector
, acara tersebut akan muncul hingga ke dokumen utama - selama tidak ada pendengar lain yang memanggilevent.stopPropagation()
metode - yang akan menjadi puncak dari peristiwa yang menggelegak ke elemen induk.Alih-alih mengikat ke elemen atau set elemen tertentu, Anda mendengarkan acara yang berasal dari elemen yang cocok dengan pemilih yang ditentukan. Ini berarti Anda dapat membuat satu pendengar, satu kali, yang secara otomatis akan cocok dengan elemen yang ada saat ini serta elemen yang ditambahkan secara dinamis.
Ini cerdas karena beberapa alasan, termasuk kinerja dan pemanfaatan memori (dalam aplikasi skala besar)
EDIT:
Jelas, elemen orangtua terdekat yang dapat Anda dengarkan lebih baik, dan Anda dapat menggunakan elemen apa pun
document
selama anak-anak yang ingin Anda pantau peristiwa berada di dalam elemen orangtua itu ... tapi itu benar-benar tidak ada hubungannya dengan pertanyaan.sumber
$(element).on(...)
. Ini adalah$(document).on(...,element,...)
. Binatang yang berbeda.Setara dengan .live () di 1,7 terlihat seperti ini:
Pada dasarnya, lihat dokumen untuk acara klik dan filter untuk # anak.
sumber
.live()
)..live()
sudah usang sekarang adalah karena itu buruk untuk menempatkan semua penangan acara langsung pada objek dokumen. Hal-hal dapat benar-benar melambat. Peristiwa tidak hanya harus menggelembung sampai ke dokumen, tetapi Anda mungkin memiliki banyak penangan acara untuk memeriksa objek dokumen. Keuntungan utama.on()
adalah Anda dapat melampirkannya ke objek induk yang jauh lebih dekat dengan objek aktual dan secara drastis meningkatkan kinerja. Jadi ... Saya TIDAK akan merekomendasikan menggunakan.on()
dengan objek dokumen. Jauh lebih baik untuk memilih objek induk yang lebih dekat..live()
pendekatan; Namun, kemampuan untuk mengendalikan delegasi tentu saja menguntungkan.Saya tahu ini agak terlambat untuk jawaban, tetapi saya telah membuat polyfill untuk metode .live (). Saya sudah mengujinya di jQuery 1.11, dan sepertinya berfungsi cukup baik. Saya tahu bahwa kami seharusnya menerapkan metode .on () sedapat mungkin, tetapi dalam proyek-proyek besar, di mana tidak mungkin untuk mengkonversi semua panggilan .live () ke panggilan .on () yang setara untuk alasan apa pun, berikut ini mungkin kerja:
Cukup sertakan setelah Anda memuat jQuery dan sebelum Anda menelepon langsung ().
sumber
.on () untuk jQuery versi 1.7 ke atas. Jika Anda memiliki versi yang lebih lama, gunakan ini:
sumber
.delegate()
berkinerja jauh lebih baik daripada.live()
itu sebabnya dokumen jQuery merekomendasikannya dan tidak berlaku lagi.live()
. Ya,.live()
masih berfungsi, tetapi jawaban di sini di SO harus merekomendasikan cara yang lebih baik dalam melakukan sesuatu. Saya telah melihat ini 20 kali di sini pada SO. Jika Anda memposting kode dengan di.live()
sini di SO, itu akan turun undian (biasanya tidak oleh saya kecuali ada sesuatu yang salah dengan itu)..live()
pasti berfungsi bahkan dalam versi 1.7 Anda masih harus menggunakan.delegate()
atau.on()
karena.live()
sudah usang karena alasan yang baik. Selama Anda perhatikan perubahan dalam sintaks untuk dua fungsi yang lebih baru baik akan bekerja dengan baik.Saya menggunakan 'live' di proyek saya tetapi salah satu teman saya menyarankan agar saya menggunakan 'on' daripada live. Dan ketika saya mencoba menggunakannya saya mengalami masalah seperti yang Anda alami.
Pada halaman saya, saya membuat baris tombol tabel dan banyak hal dom secara dinamis. tetapi ketika saya gunakan pada sihir menghilang.
Solusi lain seperti menggunakannya seperti anak kecil hanya memanggil fungsi Anda setiap kali di setiap klik. Tetapi saya menemukan cara untuk mewujudkannya lagi dan inilah solusinya.
Tulis kode Anda sebagai:
Pemanggil panggilan (); setelah Anda membuat objek di halaman seperti ini.
Dengan cara ini fungsi Anda dipanggil ketika seharusnya tidak setiap klik pada halaman.
sumber