Kode jQuery harus dijalankan setelah semua elemen HTML dimuat, jika tidak elemen belum bisa ditemukan dan kode gagal senyap. Ini kesalahan paling umum bagi pemula jQuery. Artikel ini membahas cara menjalankan jQuery setelah halaman siap (document ready).
Sintaks document ready
<script>
$(document).ready(function() {
console.log("Halaman siap!");
$("#tombol").click(function() { alert("hai"); });
});
</script>
Versi Ringkas
<script>
$(function() {
// kode di sini berjalan setelah DOM siap
});
</script>
Contoh Kasus: Mengapa Ini Penting
<script>
// SALAH: skrip di <head> tanpa ready
$("#tombol").click(...); // #tombol belum ada -> gagal
// BENAR:
$(function() {
$("#tombol").click(...); // aman, elemen sudah dimuat
});
</script>
ready vs window.load
ready berjalan saat struktur HTML siap (lebih cepat), sedangkan $(window).on("load") menunggu semua gambar dan aset selesai dimuat.
Kesimpulan
Selalu bungkus kode jQuery dengan $(function(){}) agar elemen sudah tersedia saat kode berjalan. Ini mencegah kesalahan “elemen tidak ditemukan” yang sering membingungkan pemula.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi jQuery (api.jquery.com).

