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 命名空间以提高代码重用性
Nov 13 Javascript
MooTools 1.2介绍
Sep 14 Javascript
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 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通过字符串调用函数示例
2014/03/02 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
一个用js实现的页内搜索代码
2007/05/23 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
react 生命周期实例分析
2020/05/18 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
Python绘制组合图的示例
2020/09/18 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
校园活动策划书范文
2014/01/10 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
《叶问2》观后感
2015/06/15 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
创业计划书之服装
2019/10/07 职场文书