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

View(s)

Waktu baca

13 Maret, 2022

Tanggal publikasi

01 Juli, 2023

Tanggal sunting terakhir

Daftar Blog Cara Menggunakan Event Handler jQuery untuk Elemen Dinamis

Daftar Isi

Cara Menggunakan Event Handler jQuery untuk Elemen Dinamis
1. Menambahkan Event Handler jQuery untuk elemen dinamis
2. Referensi

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.

Referensi

SUPPORT

Berikan supportmu kepada website https://www.rizki-ramadandi.com

Share this blog

Support me on

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

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