JQuery调用绑定click事件的3种写法


Posted in Javascript onMarch 28, 2015

第一种方式:

$(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>
Javascript 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
对Web开发中前端框架与前端类库的一些思考
Mar 27 #Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 #Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 #Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 #Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 #Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 #Javascript
javascript包装对象实例分析
Mar 27 #Javascript
You might like
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
10条PHP编程习惯助你找工作
2008/09/29 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python测试驱动开发实例
2014/10/08 Python
Python解析nginx日志文件
2015/05/11 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
行政副总岗位职责
2014/02/23 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
医院领导班子整改方案
2014/10/01 职场文书
基层工作经验证明样本
2014/11/16 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python