jquery的click事件失效(大部分是因为js文件的引用顺序不对)

对于初学者,在新建js文件编写click事件时,经常遇到click事件失效的问题

下面总结几个常见原因

1、没写$(function(){});就直接编写click事件

例子

<script type="text/javascript">
		
$('#signup').click(function(){
		alert("The paragraph was clicked.");
		});		
 
        </script>

2、在html文档中没引入jquery.min.js文件


3.虽然在html文档中引入了jquery.min.js文件,但引入顺序在编写click事件的js文件的后面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="jquery/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="js/main.js"></script>
<script src="jquery/jquery-1.12.3.js"></script>
<script src="jquery/bootstrap.min.js"></script>


</head>

<body>
</body>
</html>

因为main.js文件是基于 jquery.min.js文件的语法,所以main.js文件必须在jquery.min.js文件的后面

正确方式应该是

<script src="jquery/jquery-1.12.3.js"></script>
<script src="js/main.js"></script>


4.对于在html文档中使用onclick="事件A"来定义点击事件,则事件A应该在函数$(function(){});外定义。

因为在函数里定义函数,只能供函数内部使用,所以要注意});的位置

正确方式是

$(function(){

   .........

});

function 事件A{

  .......

}


click事件的一些其它注意点

click方法中的function代码会在onclick事件执行完后执行,此时click方法起到追加事件的作用。实例如下

Html代码

?
1
2
3
4
5
6
7
8
9
10
11
<script type= "text/javascript" >
$( function (){
$( "#btn3" ).click( function (){
alert( "aa" );
});
});
function  change(){
alert( "bb" );
}
</script>
<button id= "btn3"  onclick= "change()" >dd</button>

弹出框的弹出顺序先是'bb',然后是'aa'.


你可能感兴趣的:(jquery的click事件失效(大部分是因为js文件的引用顺序不对))