我试图使用jQuery的.hover方法编写一些代码，但发现它在主html文件index.html中编写时可以工作，但在引用为的javascript文件中编写时则不行。 目前，我正试图通过将hover方法应用到button标记来理解它。 它成功地执行了在html文件中编写的脚本，但不执行main.js中的脚本
控制台中没有收到任何错误，main.js被正确引用，因为该文件中还有其他代码正在成功运行
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sudoku Solver</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="main.js"></script>
<script language="JavaScript" type="text/javascript" src="sudokuSolver.js"></script>
</head>
<body>
<button class='solveSudoku' style="margin-right: 30px">Solve!</button><button class='clearSudoku'>Clear</button>
<div id='container'></div>
<script>
$("button").hover(
function () {
alert("Test")
}, function () {}
);
</script>
</body>
</html>
main.js
function createGrid() {
for (var rows = 0; rows < 9; rows++) {
for (var columns = 0; columns < 9; columns++) {
cell = "<div class='grid' "
if (rows%3==2) {
cell += "style='box-shadow: 0 1px 0 #000, "
} else {
cell += "style='box-shadow: 0 1px 0 rgb(150, 150, 150), "
}
if (rows%3==0) {
cell += "0 -1px 0 #000, "
} else {
cell += "0 -1px 0 rgb(150, 150, 150), "
}
if (columns%3==2) {
cell += "1px 0 0 #000, "
} else {
cell += "1px 0 0 rgb(150, 150, 150), "
}
if (columns%3==0) {
cell += "-1px 0 0 #000;'></div>"
} else {
cell += "-1px 0 0 rgb(150, 150, 150);'></div>"
}
$("#container").append(cell);
}
}
$(".grid").width(90);
$(".grid").height(90);
}
$("button").hover(
function () {},
function () {
alert("Test2")
}
);
$( document ).ready(function() {
createGrid()
});
如果我将函数放在$(document).ready()中，就可以工作，如下所示
$( document ).ready(function() {
createGrid()
$("button").hover(
function () {},
function () {
alert("Test2")
}
);
});
但我不知道为什么？ 一旦main.js到达$(document).ready()，它是否只是继续在里面循环，这意味着在第一次运行脚本之后，它再也不会返回到hover位？
