编程 Javascript

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>

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

- Author -

junjie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

从jquery的过滤器.filter()方法想到的

Sep 29 Javascript

js实现的捐赠管理完整实例

Jan 20 Javascript

Jquery遍历Json数据的方法

Apr 20 Javascript

JS实现的仿QQ空间图片弹出效果代码

Feb 23 Javascript

JS生成不重复的随机数组的简单实例

Jul 10 Javascript

vue实现todolist单页面应用

Apr 11 Javascript

bootstrap table使用入门基本用法

May 24 Javascript

第一个Vue插件从封装到发布

Nov 22 Javascript

详解基于vue-cli3.0如何构建功能完善的前端架子

Oct 09 Javascript

记一次vue-webpack项目优化实践详解

Feb 17 Javascript

JS Math对象与Math方法实例小结

Jul 05 Javascript

Selenium执行JavaScript脚本的方法示例

Dec 31 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