原因1:jquery导入顺序需要放在javascript片段之前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js" type="application/javascript"></script>
</head>
<body>
</body>
<script>
//todo
</script>
</html>
原因2:html解析顺序导致事件失效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js" type="application/javascript"></script>
<script>
$("button").click(function(){//js在dom节点之前解析,导致click事件失效
alert("click");
});
</script>
</head>
<body>
<button>click</button>
</body>
</html>
解决办法:
1、script片段放在<body>标签在后,让他解析顺序在dom之后
2、把script代码放在$(function(){});之中,推荐这种方法。意思是该js在dom元素加载完成后再解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js" type="application/javascript"></script>
<script>
$(function(){
$("button").click(function(){//js在dom节点之前解析,导致click事件失效
alert("click");
});
});
</script>
</head>
<body>
<button>click</button>
</body>
</html>