jquery的click事件失效

来源：互联网发布：网络电子备课系统编辑：程序博客网时间：2024/05/18 01:46

对于初学者，在新建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文件的后面

正确方式应该是

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

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

正确方式是

$(function(){

.........

});

function 事件A{

.......

}

5.元素是动态元素

6、加多});使函数不能执行

dreamwear会有错误提示，但zend studio没有，注意一个function对应一个});

<pre name="code" class="javascript">$(function(){$(".navbar-right").on('click',"li",function(){$(this).html("qwe");});});<pre name="code" class="javascript">

这代码可执行

$(function(){$(".navbar-right").on('click',"li",function(){$(this).html("qwe");});});});

这代码不可执行

7、不要使用live(0函数

浏览器会报错

TypeError: $(...).live is not a function

控制台下会有如下的提示:
火狐: TypeError: $(...).live is not a function
chrome: Uncaught TypeError: Object [object Object] has no method 'live'

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'.

1 1