by 
Elemen yang dibuat setelah halaman dimuat (misalnya baris yang ditambah lewat AJAX) tidak merespons event biasa. Solusinya adalah event delegation. Artikel ini membahas cara menangani event pada elemen dinamis dengan jQuery.
Delegasi lewat .on()
<script>
$("#daftar").on("click", ".hapus", function() {
$(this).closest("li").remove();
});
</script>
Penjelasan
Event dipasang pada wadah tetap (#daftar), lalu difilter ke .hapus. Karena wadah selalu ada, elemen .hapus yang ditambahkan kemudian tetap merespons.
Contoh Kasus: Tombol Hapus pada Item yang Ditambah Dinamis
<script>
// menambah item baru
$("#tambah").click(function() {
$("#daftar").append("<li>Item baru <button class='hapus'>x</button></li>");
});
// delegasi: tombol hapus tetap berfungsi meski baru ditambah
$("#daftar").on("click", ".hapus", function() {
$(this).closest("li").remove();
});
</script>
Perbandingan
<script>
$(".hapus").click(...); // GAGAL untuk elemen baru
$("#daftar").on("click", ".hapus"); // BERHASIL untuk elemen baru
</script>
Kesimpulan
Gunakan pola $(wadah).on("event", "target", fn) agar elemen dinamis tetap merespons event. Ini solusi wajib saat menambah elemen lewat AJAX atau perulangan.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi jQuery (api.jquery.com).
