Cara Menggunakan Event Handler jQuery untuk Elemen Dinamis

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

• https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery
• https://api.jquery.com/