File JavaScript lama dengan kode jQuery kadang masih berjalan, tapi membuat browser berat atau susah dirawat. Kesalahan umum menulis kode jQuery biasanya muncul karena kebiasaan menyalin potongan kode tanpa memahami cara kerja selector, event, dan DOM. Tujuh kesalahan berikut paling sering ditemui, lengkap dengan perbaikannya.
1. Menjalankan kode sebelum DOM siap
Memanggil $('.tombol') di bagian atas halaman sering menghasilkan koleksi kosong karena elemen belum ada saat skrip dieksekusi. Event handler tidak terpasang dan tombol terasa mati.
Bungkus inisialisasi di dalam $(document).ready() atau letakkan skrip sebelum tag penutup </body>. Jika memakai jQuery 3, $(function() { ... }) sudah cukup dan lebih ringkas.
2. Selector terlalu spesifik dan berulang
Menulis $('#konten .daftar li.aktif a') berulang kali di banyak baris memaksa jQuery menelusuri DOM dari awal setiap kali dipanggil. Selector yang panjang juga rapuh terhadap perubahan struktur HTML.
Simpan hasil pencarian di variabel:
var $tautanAktif = $('#konten .daftar li.aktif a');
$tautanAktif.addClass('disorot');
Untuk selector yang dipakai di banyak fungsi, cache di scope modul agar tidak dieksekusi ulang. Pendekatan ini juga memudahkan saat kamu perlu mengambil nilai input dengan val() atau attr() pada elemen yang sama.
3. Memasang event handler berulang kali
Handler yang dipasang di dalam fungsi yang dipanggil berkali-kali akan menumpuk. Satu klik bisa memicu tiga atau empat aksi karena handler lama belum dilepas.
Gunakan .off() sebelum .on() jika handler perlu diganti, atau pasang sekali saja di luar fungsi yang berulang. Pembahasan lebih detail soal ini ada di cara mencegah event ganda pada jQuery.
4. Memakai event handler langsung untuk elemen dinamis
Elemen yang dibuat setelah halaman dimuat tidak akan merespons $('.item').on('click', ...) karena handler hanya terpasang pada elemen yang ada saat itu. Ini sering terjadi pada daftar hasil pencarian atau baris tabel yang dimuat lewat AJAX.
Gunakan event delegation dengan parent yang sudah ada di DOM:
$('#daftar').on('click', '.item', function() {
$(this).toggleClass('selesai');
});
Dengan cara ini, elemen baru otomatis ikut ter-handle tanpa perlu memasang ulang event. Pola serupa berguna saat menambahkan elemen baru ke DOM secara dinamis.
5. Memanipulasi DOM di dalam loop
Mengubah atribut atau menambahkan elemen satu per satu di dalam loop memicu reflow berkali-kali. Browser dipaksa menghitung ulang layout setiap iterasi, dan halaman terasa tersendat pada data yang banyak.
Kumpulkan perubahan lalu terapkan sekaligus. Untuk penambahan elemen, susun string HTML atau gunakan DocumentFragment, kemudian panggil .append() satu kali di luar loop.
6. Mengabaikan nilai return dan chaining
Banyak metode jQuery mengembalikan objek jQuery sehingga bisa dirantai. Menulis $el.addClass('aktif'); $el.css('color', 'red'); bisa dipersingkat menjadi satu baris. Chaining mengurangi pemanggilan selector berulang dan membuat kode lebih rapi.
Jangan merantai metode yang mengembalikan nilai non-jQuery seperti .text() atau .val() tanpa argumen, karena hasilnya string atau angka, bukan objek jQuery.
7. Tidak membersihkan event dan data saat elemen dihapus
Menghapus elemen dengan .html('') atau innerHTML = '' meninggalkan event handler dan data yang menempel di memori. Pada aplikasi satu halaman yang sering mengganti konten, kebocoran ini menumpuk dan memperlambat browser.
Gunakan .remove() atau .empty() dari jQuery yang sekaligus membersihkan data terkait. Jika perlu melepas event tertentu tanpa menghapus elemen, panggil .off() pada namespace event yang sesuai.
Kebiasaan kecil yang menghemat waktu debug
Menghindari tujuh kesalahan di atas membuat kode lebih mudah dibaca dan performa halaman lebih stabil. Saat mengerjakan proyek sampingan, kamu bisa menerapkan pola yang sama seperti saat menyalin objek di JavaScript dengan shallow vs deep copy: pahami dulu objek yang dihadapi sebelum menulis baris kode.
Untuk hiburan sejenak setelah begadang debug, sebagian orang menonton pertandingan basket atau sepak bola bareng host kocak di tarkamlive. Suasana nonton bareng seperti itu bisa jadi cara melepas penat tanpa harus keluar rumah.
Pertanyaan yang Sering Diajukan
Apakah jQuery masih relevan dipakai untuk proyek baru?
Untuk proyek kecil yang butuh manipulasi DOM cepat, jQuery masih praktis dan banyak plugin lama masih bergantung padanya. Untuk aplikasi besar dengan banyak komponen dinamis, framework modern sering lebih cocok karena mengelola state dan rendering secara terstruktur.
Bagaimana cara mengetahui event handler menumpuk?
Buka DevTools, pilih elemen di tab Elements, lalu lihat panel Event Listeners. Jika handler yang sama muncul lebih dari sekali, berarti ada pemasangan berulang. Perbaiki dengan .off() sebelum .on() atau pindahkan pemasangan ke luar fungsi yang dipanggil berulang.
Kapan sebaiknya memakai event delegation?
Gunakan delegation ketika elemen target dibuat setelah halaman dimuat, misalnya hasil AJAX atau item yang ditambahkan lewat tombol. Pasang handler pada parent yang stabil agar elemen baru langsung berfungsi tanpa pemasangan ulang.