Tại sao cú nhấp chuột jQuery không hoạt động khi được bao gồm trong một tệp riêng biệt

Tôi là người mới bắt đầu học jQuery và phát triển web, vì vậy đây có thể là một câu hỏi ngớ ngẩn, nhưng tôi không thể tìm thấy câu trả lời cho điều này trên Google tìm kiếm các từ khóa phù hợp). Tôi có một tệp HTML đơn giản (ví dụ: 'test.html' tải jQuery, tệp javascript bên ngoài (ví dụ: 'test.js') mà tôi đã viết và có nút trong đó. Ví dụ:Tại sao cú nhấp chuột jQuery không hoạt động khi được bao gồm trong một tệp riêng biệt

<html> 
.... 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="scripts/test.js" type="text/javascript"></script> 
.... 
<body> 
<button type="button" class="button" id="my_button">test</button> 
</body> 
</html>

trong 'test.js', tôi có:.

$("#my_button").click(function() { 
    alert('test'); 
    return false; 
});

Nhưng khi tôi nhấn vào nút, nó không hoạt động Tuy nhiên, khi tôi đặt những gì trong 'test.js' trong 'test.html 'như thế này:

<html> 
.... 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("#my_button").click(function() { 
     alert('test'); 
     return false; 
    }); 
}); 
</script> 
.... 
<body> 
<button type="button" class="button" id="my_button">test</button> 
</body> 
</html>

Điều này có nghĩa là: Ai đó có thể giải thích lý do tôi t sẽ làm việc khi tôi chèn mã trong tập tin bên ngoài và tải nó? Điều đó có cần thiết để bao bọc mã jQuery với $(function() {......} để mã hoạt động không?

Lý tưởng nhất, tôi không muốn mã javascript trong mẫu HTML của tôi vì nó rõ ràng là lộn xộn. Câu hỏi có liên quan/thứ hai là: cách sạch nhất/tốt nhất để tách mã javascript/jQuery như thế nào ở trên và làm cho nó hoạt động trong mẫu HTML dự định là gì?

Cảm ơn câu trả lời của bạn.

Nguồn

2013-07-11 user1330974

$ (function() {}) == $ (tài liệu) .ready() như trong các phần tử dom đã được tải và an toàn để đính kèm người nghe vào nó. –

* "Cách sạch nhất/tốt nhất để tách mã javascript/jQuery như ở trên là gì và làm cho nó hoạt động trong mẫu HTML dự định?" * Di chuyển tập lệnh sang phải trước thẻ body đóng. –

Có, bạn sẽ làm điều này trong bất kỳ tệp nào bạn đang thực hiện liên kết trực tiếp

$(document).ready(function() { 

    $("#my_button").click(function() { 
     alert('test'); 
     return false; 
    }); 

});

Nguồn

2013-07-11 18:01:40 simongus

Cảm ơn bạn. $ (tài liệu) .ready (....) dễ đọc hơn nhiều (dễ hiểu) hơn chỉ $ (function() {..... – user1330974

Sự kiện ràng buộc trên jquery cần đối tượng HTML đã được hiển thị để hoạt động.

Nếu bạn nói $('#button').click(function(){dosomething()}); Bạn cần #button đã tồn tại trên HTML để hoạt động.

Khi bạn sử dụng $(function(){}); Mã chờ tài liệu sự kiện sẵn sàng để thực thi mã. Vì vậy, nếu bạn gọi button.click vào sai thời gian nó sẽ không tìm thấy nút và không hoạt động.

Nguồn

2013-07-11 18:02:18 Guerra

Cảm ơn bạn. Tôi đang đọc tất cả các bình luận và học cách giải thích khác nhau (nhưng câu trả lời là như nhau). :) – user1330974

Di chuyển thẻ script của test.js ngay phía trên đóng body thẻ (hoặc sau thẻ button). Nếu bạn gọi kịch bản của bạn trước khi nút của bạn, sau đó nó không thể tìm thấy nút với tên id. Nếu bạn đặt nó sau khi nút thì nó sẽ hoạt động.

Nguồn

2015-07-09 16:18:16

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