[英]External JavaScript file will load, but not execute
我正在嘗試將已成功測試的腳本內聯到外部文件中。 當我將它放在頁面本身的一對 html 腳本標簽中時,該腳本運行良好,但是當我嘗試從外部調用腳本時,它內部的 function 不會執行,並且控制台不會記錄各種 console.log 階段劇本:
$(document).ready(function() {
console.log("Script loaded!");
$("#btn-april-en").click(function() {
console.log("Confirm click!");
$.getJSON("books.json", function(data, status) {
console.log(data);
console.log(status);
$("#img-container").html("<img src=" + data.aprilWitchEn.coverIMG + ">");
$("#title-en").html("h3>Title: ") + data.aprilWitchEn.title + "</h3>"
});
});
});
<head>
<title>Title here</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuery, Bootstrap etc-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- My CSS -->
<link rel="stylesheet" href="../assets/css/styles.css">
<!-- My JavaScript -->
<!-- Scripts do not load correctly right now -->
<script type="javascript" src="../assets/js/bookLoader.js"></script>
<script type="javascript" src="../assets/js/main.js"></script>
</head>
我嘗試使用 python http.server 自己調試它,這表明找到並加載了 bootLoader.js:
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
::1 - - [29/May/2020 08:22:20] "GET / HTTP/1.1" 304 -
::1 - - [29/May/2020 08:22:20] "GET /assets/js/main.js HTTP/1.1" 304 -
::1 - - [29/May/2020 08:22:20] "GET /assets/css/styles.css HTTP/1.1" 304 -
::1 - - [29/May/2020 08:22:20] code 404, message File not found
::1 - - [29/May/2020 08:22:20] "GET /favicon.ico HTTP/1.1" 404 -
::1 - - [29/May/2020 08:22:26] "GET /en/start.html HTTP/1.1" 304 -
::1 - - [29/May/2020 08:22:32] "GET /en/books.html HTTP/1.1" 200 -
::1 - - [29/May/2020 08:22:32] "GET /assets/js/bookLoader.js HTTP/1.1" 200 -
但是當我按下具有正確 ID 的按鈕時,什么也沒有發生。 如果我可以提供更多相關信息以更輕松地找到此問題的原因,請告訴我?
(目錄結構注意事項:上面的HTML存放在/root/en/books.html,JS在/root/assets/js/bookLoader.js,所以src會跳上一級目錄來查找文件。 )
您應該將腳本放在 html 文件的末尾,在結束正文標記之前。
<body>
<!-- Your HTML here -->
<script type="javascript" src="../assets/js/bookLoader.js"></script>
<script type="javascript" src="../assets/js/main.js"></script>
</body>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.