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 相关文章推荐
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
javascript 跳转代码集合
Dec 03 Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
JS实现进度条动态加载特效
Mar 25 Javascript
element中的$confirm的使用
Apr 26 Javascript
对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
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
php常用的url处理函数总结
2014/11/19 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
深入理解vue中的$set
2017/06/01 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
python opencv之SURF算法示例
2018/02/24 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
用Python 执行cmd命令
2020/12/18 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
C语言50道问题
2014/10/23 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
应聘护士自荐信
2013/10/21 职场文书
国际经济贸易专业推荐信
2013/11/06 职场文书
超级搞笑检讨书
2014/01/15 职场文书
建设工地安全标语
2014/06/07 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python