Cara Menjalankan jQuery Setelah Halaman Siap

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).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *