当我在 HTML 中取消注释时，代码可以正常工作。请问问题是什么以及为什么会发生？上周刚开始学习网络编程，非常感谢。
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<script src="jquery-3.3.1.js"></script>
<script src="menu.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<span id="id1">Welcome back to my site. </span>
<div id="div1" >
<p>Hi</p>
<a href="javascript:void(0);" id="hyper">Hi</a>
<!--<script src="menu.js"></script> -->
</div>
<input type="button" id="btn" value="Toggle" />
</body>
</html>
JavaScript (menu.js)
$("#hyper").click(function(){
alert("Hi");
});
最佳答案
问题是当 <script>位于<head>它在文档加载之前执行。这意味着当 <script>位于<head>和$("#hyper")行是在当时执行的元素
<a href="javascript:void(0);" id="hyper">Hi</a>
未生成。所以它不起作用。
解决方案:
- 输入您的
<script>结束于<body> - 或者您可以使用
document.ready()
下面是两个例子来看看差异。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
//At this point "<div id="test"><div>" is not loaded
console.log($('#test').length) //0
console.log(document.querySelector('#test')) //null
</script>
<div id="test"><div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"><div>
<script>
console.log($('#test').length) //1
console.log(document.querySelector('#test')) //<div id="test">…</div>
</script>关于javascript - 为什么我不能只在 <head> 中声明脚本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55409885/