JQuery '$' 在 my.JS 文件中出现“ReferenceError: $ is not defined”

Question

当我像这样用 HTML 编写 JS 时，我的代码有效：

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Address Book</title>
</head>
<body>
<input id="submitButton" type = "submit" value = "Save">
<script>
    $("#submitButton").on("click", function() {
    console.log("result!");
});
</script>
</body>

但是当我将它拆分成 own.js 文件时，JS 文件无法识别 JQuery 的“$”符号。 这是它目前在 HTML 和 JS 中的样子（我将 .JS 源添加到 HTML 文件中）：

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    **<script type="text/javascript" src="addressBook.js"></script>**
    <title>Address Book</title>
</head>
<body>
<input id="submitButton" type = "submit" value = "Save">
</body>

在 addressBook.js 文件中：

$("#submitButton").on("click", function() {
    console.log("omg, you clicked me!");

单击按钮时，我在控制台中记录了以下错误：

$("#submitButton").on("click", function() { ^ ReferenceError: $ 未定义

任何帮助，将不胜感激！

谢谢

Answer 1

Wat selfagency said + 将脚本标签放在正文末尾之前。

html文件

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Address Book</title>
  </head>
  <body>
    <input id="submitButton" type="submit" value="Save" />
    <script type="text/javascript" src="addressBook.js"></script>
  </body>
</html>

地址簿.js

$('#submitButton').on('click', function() {
  console.log('result!');
});

在这种情况下，head 中的脚本标记不起作用的原因是因为在运行addressBook脚本时该按钮还不存在于 DOM 中。 这里有更详细的描述。

Answer 2

我认为您不需要在正文结尾之前添加脚本。 它在我创建addressBook.js并更改jquery后起作用

 $('#submitButton').on('click', function() { console.log("omg, you clicked me;"); });

 <;DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> <script type="text/javascript" src="addressBook.js"></script> <title>Address Book</title> </head> <body> <input id="submitButton" type="submit" value="Save" /> </body> </html>

Answer 3

<script>
    $("#submitButton").on("click", function() {
console.log("result!");
</script>

那不是正确的语法。 它应该是：

<script>
$(document).ready(function () {
  $("#submitButton").on("click", function() {
    console.log("result!");
  });
});
</script>