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?

Hói 1 tháng trước

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.

Trả lời 1 tháng trước

Viết Trả Lời: