Cara Menggunakan Event Handler jQuery untuk Elemen Dinamis
Tutorial bagaimana cara membuat event handler jQuery untuk elemen HTML yang ditambahkan secara dinamis
Rizki Ramadandi
Penulis
5
View(s)
{{ readingTime }}
Waktu baca
13 Maret, 2022
Tanggal publikasi
01 Juli, 2023
Tanggal sunting terakhir
Daftar Isi
Event handler adalah sebuah fungsi yang berisi perintah-perintah yang akan dieksekusi saat suatu aksi dilakukan.
Beberapa jenis event jQuery adalah sebagai berikut.
- click: trigger event saat elemen di klik
- change: trigger event saat elemen (untuk input, textarea, dan select) berubah nilainya
- mouseeneter: trigger event saat pointer mouse memasuki elemen
- mouseeleave: trigger event saat pointer mouse meninggalkan elemen
- dan lainnya
Event lainnya dapat kamu lihat di https://api.jquery.com/category/events/.
Menambahkan Event Handler jQuery untuk elemen dinamis#
Untuk menambahkan suatu event handler jQuery biasanya hanya perlu menambahkannya dengan cara seperti berikut.
<script>
$(document).ready(function(){
$('.myClass').on(click(function(){
// do something
})
})
</script>
Akan tetapi, event handler tersebut hanya akan berfungsi untuk elemen saat halaman web selesai dimuat saja. Saat menambahkan elemen baru dengan menggunakan jQuery atau Javascript biasa dengan atribut class yang sama, event handlernya tidak bisa digunakan pada elemen tersebut.
Untuk menangani hal itu, kamu bisa menambahkan event handler dengan cara sebagai berikut.
<script>
$(document).ready(function() {
$('body').on('click','.myClass',function() {
// do something
})
})
</script>
Dengan menggunakan event handler di atas, semua elemen dengan atribut class myClass baik itu elemen yang sudah ada sejak halaman dimuat maupun elemen dinamis yang akan ditambahkan setelah halaman selesai dimuat dapat menggunakan event handler yang sama.
ADVERTISEMENT
Referensi#
- https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery
- https://api.jquery.com/
ADVERTISEMENT
SUPPORT
Berikan supportmu kepada website https://www.rizki-ramadandi.com
Support me on
ADVERTISEMENT
BLOG YANG MIRIP
Beberapa blog yang mirip dengan blog Cara Menggunakan Event Handler jQuery untuk Elemen Dinamis
Menggunakan DataTables untuk Memoles Tampilan Tabel HTML
Tutorial menggunakan DataTables untuk membuat tabel HTML lebih menarik dan inteaktif
Walkthrough Digimon World Bahasa Indonesia Lengkap
Walktrough lengkap game Digimon World Bahasa Indonesia
Cara Membuat Indikator Progres Membaca Artikel Web - jQuery
Tutorial membuat read progress indikator pada halaman artikel web menggunakan jQuery
Walkthrough Digimon World 2 Bahasa Indonesia Lengkap
Walktrough lengkap game Digimon World 2 Bahasa Indonesia
Walkthrough Final Fantasy Bahasa Indonesia Lengkap
Walktrough lengkap game Final Fantasy Bahasa Indonesia
Review: Wizard of Legend
Pengalaman saat bermain game Wizard of Legend beserta tips-tips untuk menyelesaikan Chaos Trials
Cara Cepat & Mudah Mendapatkan Resource Dasar - Summoner's Greed
Cara cepat dan mudah untuk mendapatkan resource dasar, seperti Coin, Gem, Charm, Summoning Orb, dan Summoning Stone pada game Summoner's Greed
Apa itu CSS Box Model?
Mengenal apa itu Box Model CSS
Mode Game - Summoner's Greed
Semua mode game yang tersedia pada game Summoner's Greed
Lokasi Gym - Digimon World
Lokasi semua gym beserta peralatannya pada game Digimon World
ADVERTISEMENT
Kata kunci: tutorial, html, event, handler, jquery, elemen, dinamis, tutorial bagaimana, bagaimana cara, cara membuat, membuat event, elemen html, html yang, yang ditambahkan, ditambahkan secara, secara dinamis, cara menggunakan, menggunakan event, event handler, handler jquery, jquery untuk, untuk elemen, elemen dinamis, tutorial bagaimana cara, bagaimana cara membuat, cara membuat event, membuat event handler, untuk elemen html, elemen html yang, html yang ditambahkan, yang ditambahkan secara, ditambahkan secara dinamis, cara menggunakan event, menggunakan event handler, event handler jquery, handler jquery untuk, jquery untuk elemen, untuk elemen dinamis, tutorial bagaimana cara membuat, bagaimana cara membuat event, cara membuat event handler, membuat event handler jquery, jquery untuk elemen html, untuk elemen html yang, elemen html yang ditambahkan, html yang ditambahkan secara, yang ditambahkan secara dinamis, cara menggunakan event handler, menggunakan event handler jquery, event handler jquery untuk, handler jquery untuk elemen, jquery untuk elemen dinamis, tutorial bagaimana cara membuat event, bagaimana cara membuat event handler, cara membuat event handler jquery, membuat event handler jquery untuk, handler jquery untuk elemen html, jquery untuk elemen html yang, untuk elemen html yang ditambahkan, elemen html yang ditambahkan secara, html yang ditambahkan secara dinamis, cara menggunakan event handler jquery, menggunakan event handler jquery untuk, event handler jquery untuk elemen, handler jquery untuk elemen dinamis, tutorial bagaimana cara membuat event handler, bagaimana cara membuat event handler jquery, cara membuat event handler jquery untuk, membuat event handler jquery untuk elemen, event handler jquery untuk elemen html, handler jquery untuk elemen html yang, jquery untuk elemen html yang ditambahkan, untuk elemen html yang ditambahkan secara, elemen html yang ditambahkan secara dinamis, cara menggunakan event handler jquery untuk, menggunakan event handler jquery untuk elemen, event handler jquery untuk elemen dinamis, tutorial bagaimana cara membuat event handler jquery, bagaimana cara membuat event handler jquery untuk, cara membuat event handler jquery untuk elemen, membuat event handler jquery untuk elemen html, event handler jquery untuk elemen html yang, handler jquery untuk elemen html yang ditambahkan, jquery untuk elemen html yang ditambahkan secara, untuk elemen html yang ditambahkan secara dinamis, cara menggunakan event handler jquery untuk elemen, menggunakan event handler jquery untuk elemen dinamis, tutorial bagaimana cara membuat event handler jquery untuk, bagaimana cara membuat event handler jquery untuk elemen, cara membuat event handler jquery untuk elemen html, membuat event handler jquery untuk elemen html yang, event handler jquery untuk elemen html yang ditambahkan, handler jquery untuk elemen html yang ditambahkan secara, jquery untuk elemen html yang ditambahkan secara dinamis, cara menggunakan event handler jquery untuk elemen dinamis, tutorial bagaimana cara membuat event handler jquery untuk elemen, bagaimana cara membuat event handler jquery untuk elemen html, cara membuat event handler jquery untuk elemen html yang, membuat event handler jquery untuk elemen html yang ditambahkan, event handler jquery untuk elemen html yang ditambahkan secara, handler jquery untuk elemen html yang ditambahkan secara dinamis, tutorial bagaimana cara membuat event handler jquery untuk elemen html, bagaimana cara membuat event handler jquery untuk elemen html yang, cara membuat event handler jquery untuk elemen html yang ditambahkan, membuat event handler jquery untuk elemen html yang ditambahkan secara, event handler jquery untuk elemen html yang ditambahkan secara dinamis, tutorial bagaimana cara membuat event handler jquery untuk elemen html yang, bagaimana cara membuat event handler jquery untuk elemen html yang ditambahkan, cara membuat event handler jquery untuk elemen html yang ditambahkan secara, membuat event handler jquery untuk elemen html yang ditambahkan secara dinamis, tutorial bagaimana cara membuat event handler jquery untuk elemen html yang ditambahkan, bagaimana cara membuat event handler jquery untuk elemen html yang ditambahkan secara, cara membuat event handler jquery untuk elemen html yang ditambahkan secara dinamis, tutorial bagaimana cara membuat event handler jquery untuk elemen html yang ditambahkan secara, bagaimana cara membuat event handler jquery untuk elemen html yang ditambahkan secara dinamis, tutorial bagaimana cara membuat event handler jquery untuk elemen html yang ditambahkan secara dinamis
KONTEN
YANG
MIRIP
Menggunakan DataTables untuk Memoles Tampilan Tabel HTML
Tutorial menggunakan DataTables untuk membuat tabel HTML lebih menarik dan inteaktif
16 April, 2023
4
View(s)
Walkthrough Digimon World Bahasa Indonesia Lengkap
Walktrough lengkap game Digimon World Bahasa Indonesia
15 Desember, 2023
32
View(s)
Cara Membuat Indikator Progres Membaca Artikel Web - jQuery
Tutorial membuat read progress indikator pada halaman artikel web menggunakan jQuery
16 April, 2023
No
View(s)
Walkthrough Digimon World 2 Bahasa Indonesia Lengkap
Walktrough lengkap game Digimon World 2 Bahasa Indonesia
06 April, 2023
55
View(s)
Walkthrough Final Fantasy Bahasa Indonesia Lengkap
Walktrough lengkap game Final Fantasy Bahasa Indonesia
15 Desember, 2023
34
View(s)
Review: Wizard of Legend
Pengalaman saat bermain game Wizard of Legend beserta tips-tips untuk menyelesaikan Chaos Trials
15 Desember, 2023
27
View(s)
Cara Cepat & Mudah Mendapatkan Resource Dasar - Summoner's Greed
Cara cepat dan mudah untuk mendapatkan resource dasar, seperti Coin, Gem, Charm, Summoning Orb, dan Summoning Stone pada game Summoner's Greed
22 Maret, 2024
5
View(s)
Apa itu CSS Box Model?
Mengenal apa itu Box Model CSS
13 Februari, 2024
8
View(s)
Mode Game - Summoner's Greed
Semua mode game yang tersedia pada game Summoner's Greed
19 Juli, 2023
9
View(s)
Lokasi Gym - Digimon World
Lokasi semua gym beserta peralatannya pada game Digimon World
15 Desember, 2023
24
View(s)
MUNGKIN
KAMU
JUGA
SUKA
Penjelasan Karakter Renegade - Brotato
Penjelasan karakter Renegade pada game Brotato
02 Oktober, 2024
1
View(s)
Cara Mendapatkan DigiSeabass - Digital Tamers 2
Apa itu DigiSeabass dan bagaimana cara mendapatkannya pada game Digital Tamers 2
28 September, 2024
1
View(s)
Cara Mendapatkan Deluxe Mushroom & DigiWater untuk Drimogemon - Digital Tamers 2
Bagaimana cara mendapatkan Deluxe Mushroom dan DigiWater untuk Drimogemon pada game Digital Tamers 2
27 September, 2024
2
View(s)
Penjelasan Karakter King - Brotato
Penjelasan karakter King pada game Brotato
26 September, 2024
2
View(s)
Cara Mengundang Meramon ke Server City - Digital Tamers 2
Bagaimana cara mengundang Meramon ke Server City pada game Digital Tamers 2
26 September, 2024
1
View(s)
Bahan Apa yang Dicari Oleh Burgamon? - Digital Tamers 2
Bahan yang dicari oleh Burgamon pada game Digital Tamers 2
25 September, 2024
1
View(s)
Alur Misi Koromon - Digital Tamers 2
Bagaimana alur misi dari Koromon besar pada game Digital Tamers 2
24 September, 2024
2
View(s)
Penjelasan Karakter Golem - Brotato
Penjelasan karakter Golem pada game Brotato
20 September, 2024
2
View(s)
Penjelasan Karakter Fisherman - Brotato
Penjelasan karakter Fisherman pada game Brotato
14 September, 2024
1
View(s)
Penjelasan Karakter Cryptid - Brotato
Penjelasan karakter Cryptid pada game Brotato
09 September, 2024
3
View(s)
KONTEN
LAINNYA
Blog
Koleksi blog random
Resource
Koleksi berbagai macam resource gratis
Tool
Koleksi online tools berbagai macam fungsi
Game
Koleksi berbagai macam game sederhana
Abbreviation
Koleksi abreviasi/singkatan