Tại sao nên $ .click() được đính kèm trong $ (tài liệu) .ready()?

Tôi đang trải qua http://docs.jquery.com/How_jQuery_Works và tìm yêu cầu kèm theo sự kiện $.click() trong $(document).ready() thậm chí một chút lạ. Những khó khăn của tôi như sau:

Khi tài liệu tải, điều khiển sẽ nhập $(document).ready() nhưng sẽ tiến hành thực hiện $.click()? (Dựa trên hành vi của nó sẽ không. Nhưng khi điều khiển nhập vào một chức năng bình thường, tại sao nó sẽ không nhập hàm $.click()?)
Vì người dùng chỉ có thể nhìn thấy url sau khi tài liệu sẵn sàng, thực sự là cần thiết để nhúng $.click() trong phạm vi $(document).ready()?

Nguồn

2012-04-10 Rajkumar Masaniayan

Các How jQuery Works document lấy ví dụ về ràng buộc một .click() bên trong $(document).ready() phải chắc chắn rằng nguyên tố này mà sự kiện .click() là ràng buộc đã được tạo ra khi các chức năng được thực thi.

Các .click() gọi với một chức năng như tham số của nó không thực hiện các .click() trên các nút phù hợp với selector trước của nó, mà là liên kết với các chức năng để các nút kết hợp onclick.

Nếu bạn đã cố gắng làm một cái gì đó như thế này:

$('a').click(function(){ 
    alert('clicked me'); 
});

... trong tài liệu <head> hoặc trước bất kỳ yếu tố <a> đã được trả lại, sự kiện này sẽ không được ràng buộc với bất kỳ nút vì không có nút khớp với bộ chọn $('a') tồn tại tại thời điểm hàm được thực thi.

Hơn nữa, nếu bạn đã làm điều đó khi một số thẻ <a> đã được tạo, chỉ những thẻ đã được tạo mới có được sự kiện bị ràng buộc. <a> thẻ được tạo sau khi hàm bị ràng buộc sẽ không có liên kết .click().

Vì vậy, trong jQuery (và các khuôn khổ JavaScript khác), bạn thường sẽ thấy ước thêm xử lý sự kiện, ràng buộc các widget, vv, bên trong một $(document).ready(function(){});

Nguồn

2012-04-10 16:38:06

Có, bạn cần phải chắc chắn rằng phần tử DOM để mà bạn đang thêm trình xử lý nhấp chuột tồn tại, bất kỳ bạn biết điều này bằng tài liệu sẵn sàng.

Nguồn

2012-04-10 16:38:26 Maess

Có vẻ như ai đó đã đánh tôi sau 19 giây :) – Maess

Đó không phải là cuộc gọi thực tế đến .click() là mối quan tâm ở đây, mà là bộ chọn cho phần tử được gọi.

Ví dụ, nếu có một phần tử với id="myButton" sau đó bạn sẽ tham khảo nó với:

$('#myButton')

Tuy nhiên, nếu yếu tố đó chưa được nạp (có nghĩa là, nếu tài liệu vẫn chưa sẵn sàng và bạn không biết yếu tố nào hiện đang tải), thì bộ chọn đó sẽ không tìm thấy bất kỳ thứ gì. Vì vậy, nó sẽ không gọi .click() trên bất cứ điều gì (hoặc để ràng buộc các sự kiện hoặc để bắn nó, tùy thuộc vào các đối số (s) để .click()).

Bạn có thể sử dụng các cách tiếp cận khác, such as the jQuery .on() function, có thể liên kết sự kiện với các phần tử cha mẹ chung và lọc sự kiện "sôi nổi" từ sự kiện được thêm vào sau này trong vòng đời của tài liệu. Nhưng nếu bạn chỉ sử dụng một bộ chọn bình thường và gọi một hàm thì bộ chọn cần tìm một cái gì đó bên trong DOM để hàm có thể làm bất cứ điều gì.

Nguồn

2012-04-10 16:40:45 David

Javascript thường bắt đầu thực hiện ngay khi thẻ được đọc. Điều này có nghĩa là trong thực tế tiêu chuẩn đưa các tập lệnh vào đầu, không có phần tử nào được tạo ra để bạn có thể ràng buộc một trình xử lý nhấp chuột. Ngay cả yếu tố cơ thể cũng không tồn tại. Sử dụng jQuery.ready trì hoãn thực thi mã của bạn cho đến khi tất cả các phần tử DOM đã được tải.

Nguồn

2012-04-10 16:41:03

Vấn đề mà phương pháp $(document).ready(..) đang cố giải quyết là sự căng thẳng giữa việc thực thi mã javascript cho trang và thời gian mà các điều khiển trong trang bị ràng buộc. Chức năng ready sẽ kích hoạt khi tài liệu sẵn sàng và các phần tử DOM có sẵn do đó mã javascript có thể đưa ra các giả định hợp lý về DOM

Ví dụ phổ biến nhất là vị trí mã javascript đối với các phần tử DOM mà nó đang cố gắng hoạt động trên. Hãy xem xét

<script> 
$('#target').click(function() { 
    alert('It was clicked'); 
}); 
</script> 
<div id="target">Click Me</div>

Trong ví dụ cụ thể này, javascript sẽ không hoạt động như dự định. Khi khối tập lệnh được nhập vào dòng click được chạy và hiện tại không có phần tử DOM nào có id target do đó trình xử lý liên kết với không có gì. Không có gì thực sự sai với mã, nó chỉ có thời gian không may chạy trước khi phần tử DOM được tạo ra.

Trong ví dụ này, vấn đề là hiển nhiên vì mã và phần tử DOM được ghép nối trực quan với nhau. Trong các trang web phức tạp hơn mặc dù javascript thường trong một tập tin hoàn toàn riêng biệt và không có đảm bảo hình ảnh về thứ tự tải (cũng không nên nó). Sử dụng $(document).ready(..) tính trừu tượng sẽ xóa câu hỏi đặt hàng là nguồn tiềm ẩn của các vấn đề và tạo điều kiện tách riêng mối quan tâm

Nguồn

2012-04-10 16:43:22 JaredPar

Tại sao nên $ .click() được đính kèm trong $ (tài liệu) .ready()?

Trả lời

Các vấn đề liên quan