- Kịch bản Javascript không hoạt động hoặc bị ngắt quãng giữa chừng.
- Bạn không thể sử dụng các function của thư viện jQuery trong kịch bản của mình.
- Các thư viện Javascript cần sự hỗ trợ của jQuery (Vd: Bootstrap, OwlCarousel, fancyBox…) không hoạt động (báo lỗi).
- Javascript Console của trình duyệt hiện các error log:
- Uncaught TypeError: …Top… is not a function
- Uncaught TypeError: …click… is not a function
- Uncaught TypeError: …ready… is not a function
- Uncaught TypeError: …$ is not defined
- …
TÓM TẮT NỘI DUNG
Nguyên nhân
- Do bạn chưa (quên) khai báo (nhúng) thư viện jQuery: Nếu bạn chưa nhúng thì lấy đâu ra function để bạn sử dụng.
- Do bạn nhúng thư viện jQuery sai URL: Vì một lý do nào đó (lỗi đánh máy, nhầm file…) mà bạn gõ sai URL của file chứa thư viện jQuery.
- Do bạn khai báo (nhúng) thư viện jQuery không đúng thứ tự: Vị trí mà bạn nhúng thư viện jQuery nằm bên dưới kịch bản Javascript hoặc bên dưới thư viện khác cần sự hỗ trợ của jQuery. Hãy nên nhớ rằng, nếu bạn muốn sử dụng một function của jQuery, bạn phải đặt nơi khai báo ở vị trí bên trên các kịch bản Javascript có sử dụng function của jQuery.
Hướng dẫn khắc phục
Bước 1. Kiểm tra bạn đã khai báo (nhúng) thư viện jQuery chưa
Đầu tiên, bạn cần kiểm tra trong khu vực <head>...</head> hay <body>...</body> để xác định chắc chắn rằng bạn đã khai báo (nhúng) thư viện jQuery vào trang HTML.
Nếu bạn phát hiện rằng mình chưa khai báo (nhúng) jQuery, hãy bổ sung chi tiết còn thiếu này và thử load lại trang.
Trường hợp sau khi load lại trang mà lỗi bạn đang gặp phải không còn nữa (đã được fixed), bạn có thể bỏ qua bước 2 và 3.
Trường hợp sau khi load lại trang mà lỗi vẫn còn đó, bạn hãy thực hiện tiếp bước dưới đây.
Bước 2. Kiểm tra URL của thư viện jQuery có đúng (hoạt động) hay không
Kế đến, bạn hãy thử load URL của thư viện jQuery bằng 1 tab mới xem liệu URL này có hoạt động (chính xác).
Nếu sau khi chạy URL, trình duyệt load ra source của jQuery nghĩa là URL đang hoạt động ổn. Nếu trình duyệt không thể load được, nghĩa là URL đã bị hỏng (file đã bị xoá hoặc di chuyển/đổi tên). Lúc này bạn hãy URL jQuery đã bị hỏng bằng 1 URL mới có thể hoạt động tốt.
Sau đó, bạn hãy thử load lại trang. Trường hợp sau khi load lại trang mà lỗi bạn đang gặp phải không còn nữa (đã được fixed), bạn có thể bỏ qua bước 2 và 3.
Trường hợp sau khi load lại trang mà lỗi vẫn còn đó, bạn hãy thực hiện tiếp bước dưới đây.
Bước 3. Kiểm tra vị trí khai báo thư viện jQuery có phù hợp hay không
Hãy đảm bảo rằng bạn bố trí code Javascript theo thứ tự sau đây:
- Thư viện jQuery
- Các thư viện cần sự hỗ trợ của jQuery (nếu có). Vd: Bootstrap, OwlCarousel, fancyBox…
- Kịch bản Javascript bạn tự viết có sử dụng jQuery function.
Ví dụ:
<html>
...
<body>
<script src="/js/jquery.min.js"/> <!-- Thư viện jQuery --!>
<script src="/assets/plugins/OwlCarousel2-2.2.1/dist/owl.carousel.min.js"></script> <!-- Thư viện OwlCarousel cần sự. hỗ trợ của jQuery --!>
<script src="/js/custom-scripts.js"></script> <!-- Kịch bản Javascript tự viết có sử dụng jQuery function --!>
</body>
</html>
Và chúng ta cũng đã đi qua mục cuối cùng trong bài hướng dẫn rồi. Nếu bạn có bất kỳ thắc mắc nào, hay không thực hiện được bước nào, hãy để lại bình luận bên dưới nhé. Nếu bạn cảm thấy bài viết hay và hữu ích, hãy để lại 1 like, share, đánh giá để ủng hộ đội ngũ biên tập của hoccode.org nhé!
Chúc các bạn thực hiện thành công!
