Leaderboard ads banner

jQuery tại sao cần sử dụng document.ready

Mình không hiểu tại sao khi viết mã lệnh jQuery thì cần đặt bên trong document.ready.

Ví dụ như mã sau:

$(document).ready(function () {
  $("a").click(function (e) {
    alert("aaaa");
    e.preventDefault()/
  });
});

và đoạn mã sau:

$("a").click(function (e) {
    alert("aaaa");
    e.preventDefault()/
});

cùng có kết quả cuối cùng như nhau.

Vậy thì tại sao và khi nào cần sử dụng document.ready?

1 Câu Trả Lời

Phan Quang Phan Quang

HTML render từ trên xuống dưới theo 1 thread (single thread), do đó cái chưa được render ra sẽ bị lỗi khi gọi nó.

Ví dụ:

(1) <div>a div</div>

(2) <button>a button</button>

Browser đang render thằng (1) mà gọi thằng (2) sẽ không thấy.

Nếu bạn viết js ở cuối trang:

(1) <div>a div</div>

(2) <button>a button</button>

(3) <script>/*button available */</script>

thì vị trí thứ (3) sẽ gọi được tới button vì nó đã được render ra rồi.

Nhưng nếu bạn gọi:

(0) <script>/*button **NOT** available */</script>

(1) <div>a div</div>

(2) <button>a button</button>

gọi script ở vị trí thứ 0 thì button chưa được render ra nên sẽ không thấy nó.

Do đó, jQuery cung cấp 1 ready callback (hàm gọi lại) là khi nào document được render ra hết thì những script bạn viết trong nó mới được thực thi cho dù bạn đặt ở đâu đi chăng nữa.

Nội dung tối thiểu 100 ký tự

Câu Hỏi Liên Quan