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 isArray()函数判断对象类型的种种方法
Oct 11 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
js+css3实现炫酷时钟
Aug 18 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操作xml
2013/10/27 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
js确定对象类型方法
2012/03/30 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
Python抓取电影天堂电影信息的代码
2016/04/07 Python
python简单读取大文件的方法
2016/07/01 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
python高阶爬虫实战分析
2018/07/29 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
python将音频进行变速的操作方法
2020/04/08 Python
海淘母婴商城:国际妈咪
2016/07/23 全球购物
高级Java程序员面试要点
2013/08/02 面试题
六年级数学教学反思
2014/02/03 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
中职招生先进个人材料
2014/08/31 职场文书
银行自荐信范文
2015/03/25 职场文书
小马王观后感
2015/06/11 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
四年级数学教学反思
2016/02/16 职场文书
javascript的var与let,const之间的区别详解
2022/02/18 Javascript
vue中data里面的数据相互使用方式
2022/06/05 Vue.js
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle