Cara Mengatasi Event Delegation Tidak Bekerja Javascript dalam 5 Cek Cepat

Ditulis oleh JavaScript

Cek paling cepat untuk cara mengatasi event delegation tidak bekerja javascript: pastikan listener menempel di container statis yang sudah ada saat script jalan, lalu ganti e.target langsung dengan e.target.closest(‘button’). Kebanyakan kasus mati karena klik mendarat di ikon atau span di dalam tombol, sehingga kondisi selector gagal.

Penyebab Event Delegation Tidak Bekerja

Delegation mengandalkan event bubbling dari anak ke parent. Satu titik putus saja membuat semua klik terlihat mati.

  • Listener dipasang di parent yang salah atau belum ada di DOM saat kode dijalankan.
  • Salah baca e.target dan e.currentTarget pada elemen bersarang seperti ikon dalam tombol.
  • Kondisi closest atau matches tidak cocok dengan selector karena typo class atau struktur berubah.
  • Ada stopPropagation liar atau struktur dinamis yang menghapus dan mengganti ulang parent.

Tabel Troubleshooting Cepat

Kondisi Penyebab Solusi
Klik anak tidak respon target berisi span atau svg Gunakan target.closest lalu cek null
Tombol dinamis mati Listener dipasang ke tiap tombol Pindah listener ke container statis
Salah elemen ke-trigger Selector terlalu umum Persempit selector, misalnya .delete-btn

BACA JUGA:

Cara Memperbaiki Event Delegation yang Mati

Ikuti urutan ini agar akar masalah cepat ketemu:

  1. Pastikan parent statis dan sudah ada sebelum addEventListener dipanggil.
  2. Gunakan closest untuk naik dari elemen terdalam ke tombol atau item yang dimaksud.
  3. Periksa matches dengan selector persis seperti di HTML.
  4. Tulis console.log(e.target) sekali untuk melihat elemen yang benar benar diklik.

SALAH:

list.addEventListener("click", (e) => {
  if (e.target.className === "hapus") {
    hapusItem(e.target);
  }
});

BENAR:

list.addEventListener("click", (e) => {
  const btn = e.target.closest(".hapus");
  if (!btn) return;
  hapusItem(btn);
});

Versi benar tetap jalan walau pengguna mengklik ikon di dalam tombol. Cek tambahan:

  • Parent ada, cek lewat console.log(list) tidak null.
  • Selector tepat, termasuk titik untuk class dan pagar untuk id.
  • Tidak ada stopPropagation liar di listener anak.

Cara Mencegah Error Terulang

Delegasikan ke container statis terdekat, misalnya #todo-list, bukan langsung ke document. Scope sempit membuat debug lebih mudah dan mengurangi klik nyasar.

Gunakan textContent untuk label dan dataset untuk identitas seperti data-id. Pola ini lebih stabil daripada membaca teks tombol atau posisi index.

  • List dinamis: satu listener di ul, kenali item lewat closest(“li”).
  • Tabel: satu listener di tbody, kenali aksi lewat class tombol.
  • Tombol dinamis: simpan id di dataset, jangan di atribut yang mudah berubah.

FAQ

Kenapa klik tombol baru tidak jalan padahal kode sama?

Listener kemungkinan dipasang langsung ke tombol lama, sehingga tombol baru tidak kebagian listener.

Kapan pakai target.closest dibanding target langsung?

Pakai closest setiap tombol berisi elemen anak seperti ikon, span, atau svg.

Apakah parent boleh dipasang di document?

Bisa, tetapi container statis terdekat lebih baik karena seleksinya lebih sempit dan mudah dirawat.

Artikel Terkait