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版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
10分钟学会js处理json的常用方法
Dec 06 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
PHP的引用详解
2015/02/22 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
python实现线程池的方法
2015/06/30 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
Python制作词云图代码实例
2019/09/09 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
美国滑板店:Tactics
2020/11/08 全球购物
木工主管岗位职责
2013/12/08 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
python中 Flask Web 表单的使用方法
2022/05/20 Python