Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
166 views
in Technique[技术] by (71.8m points)

javascript - 我的.JS文件中的JQuery'$'得到“ ReferenceError:$未定义”(JQuery '$' getting “ReferenceError: $ is not defined” when in my .JS file)

My code works when I write the JS in HTML like so:

(当我用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>

but when I split it out into it's own .js file, the JS file doesn't recognise the JQuery '$' sign.

(但是当我将其拆分成自己的.js文件时,JS文件无法识别JQuery的“ $”符号。)

This is how it currently looks in both HTML and JS (I added the .JS source to the HTML file):

(这是当前在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>

and in the addressBook.js file:

(并在addressBook.js文件中:)

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

I get the following error logged to the console when i click the button:

(单击按钮时,我将以下错误记录到控制台:)

$("#submitButton").on("click", function() { ^ ReferenceError: $ is not defined

($(“#submitButton”)。on(“ click”,function(){^ ReferenceError:$未定义)

Any help would be appreciated!

(任何帮助,将不胜感激!)

Thanks

(谢谢)

  ask by MattCouthon translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Wat selfagency said + put the script tag before the end of the body.

(Wat selfagency说,+将脚本标签放在正文结尾之前。)

html file

(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>

addressbook.js

(地址簿)

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

The reason why the script tag in the head in this case doesn't work is because the button did not yet exist in the DOM when the addressBook script was run.

(在这种情况下,头部中的script标签不起作用的原因是因为运行addressBook脚本时该按钮在DOM中尚不存在。)

Described in more detail here .

(这里更详细地描述。)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...