JQuery调用绑定click事件的3种写法
作者:junjie 时间:2024-04-09 19:48:14
第一种方式:
$(document).ready(function(){
$("#clickme").click(function(){
alert("Hello World click");
});
第二种方式:
$('#clickmebind').bind("click", function(){
alert("Hello World bind");
});
第三种方式:
$('#clickmeon').on('click', function(){
alert("Hello World on");
});
});
注意:第三种方式只适用于jquery 1.7以上的版本
源码如下:
<!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=gb2312" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<style type="text/css">
#frm label.error {
color: Red;
}
</style>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("#clickme").click(function(){
alert("Hello World click");
});
$('#clickmebind').bind("click", function(){
alert("Hello World bind");
});
$('#clickmeon').on('click', function(){
alert("Hello World on");
});
});
</script>
<body>
<label></label>
<form id="frm" name="frm" method="post" action=""><label>用 户 名:
<input type="text" name="username" id="username" />
</label>
<p>
<label>邮 编 :<label></label></label>
<label>
<input type="text" name="postcode" id="postcode" />
<br />
</label>
</p>
<p><label>数 字 :
<input type="text" name="number" id="number" />
</label>
<br /><label>身份证号:
<input type="text" name="identifier" id="identifier" />
</label>
<label>
<input type="button" name="clickme" id="clickme" value="click me" />
</label>
<label>
<input type="button" name="clickmebind" id="clickmebind" value="clickme_bind" />
</label>
<label>
<input type="button" name="clickmeon" id="clickmeon" value="clickme_on" />
</label>
</p>
</form>
</body>
</html>
标签:JQuery,调用,绑定,click,事件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Google Chrome CSS选择器速度测试比较
2008-10-06 13:24:00
![](https://img.aspxhome.com/file/UploadPic/200810/6/2008106174242741s.png)
MySql常用操作SQL语句汇总
2024-01-21 00:11:53
Django中更新多个对象数据与删除对象的方法
2021-08-13 13:31:46
一个asp分页源代码例子
2007-09-19 12:25:00
在SQL触发器或存储过程中获取在程序登录的用户
2024-01-29 09:30:40
Oracle 中文字段进行排序的sql语句
2009-09-26 18:58:00
Python中方法的缺省参数问题解读
2022-10-07 17:00:45
![](https://img.aspxhome.com/file/2023/9/92059_0s.png)
asp组件上传
2010-05-27 12:16:00
Python图片视频超分模型RealBasicVSR的使用教程
2021-10-11 13:40:04
![](https://img.aspxhome.com/file/2023/4/105244_0s.jpg)
ThinkPHP php 框架学习笔记
2023-09-10 08:20:32
Python3实现飞机大战游戏
2022-08-25 05:29:03
![](https://img.aspxhome.com/file/2023/6/81826_0s.jpg)
python中的标准库html
2022-01-09 22:04:25
![](https://img.aspxhome.com/file/2023/0/121780_0s.png)
设计师挖掘用户需求浅谈
2009-10-25 13:24:00
PHP模板引擎Smarty的缓存使用总结
2023-11-15 09:55:12
SQL Server实现分页方法介绍
2024-01-15 12:54:45
![](https://img.aspxhome.com/file/2023/5/88245_0s.jpg)
下载golang.org/x包的操作方法
2023-07-11 16:54:04
Python字典和列表性能之间的比较
2022-08-08 12:49:58
![](https://img.aspxhome.com/file/2023/0/128630_0s.png)
zabbix通过percona插件监控mysql的方法
2024-01-23 04:51:22
![](https://img.aspxhome.com/file/2023/5/93895_0s.png)
python路径的写法及目录的获取方式
2023-10-22 09:26:57
慎用UL列表
2009-03-25 20:21:00
![](https://img.aspxhome.com/file/UploadPic/20093/25/01-71s.gif)