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

作者:junjie 时间:2024-04-09 19:48:14 

第一种方式:


$(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>
 &nbsp;
<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,事件
0
投稿

猜你喜欢

  • Google Chrome CSS选择器速度测试比较

    2008-10-06 13:24:00
  • MySql常用操作SQL语句汇总

    2024-01-21 00:11:53
  • Django中更新多个对象数据与删除对象的方法

    2021-08-13 13:31:46
  • 一个asp分页源代码例子

    2007-09-19 12:25:00
  • 在SQL触发器或存储过程中获取在程序登录的用户

    2024-01-29 09:30:40
  • Oracle 中文字段进行排序的sql语句

    2009-09-26 18:58:00
  • Python中方法的缺省参数问题解读

    2022-10-07 17:00:45
  • asp组件上传

    2010-05-27 12:16:00
  • Python图片视频超分模型RealBasicVSR的使用教程

    2021-10-11 13:40:04
  • ThinkPHP php 框架学习笔记

    2023-09-10 08:20:32
  • Python3实现飞机大战游戏

    2022-08-25 05:29:03
  • python中的标准库html

    2022-01-09 22:04:25
  • 设计师挖掘用户需求浅谈

    2009-10-25 13:24:00
  • PHP模板引擎Smarty的缓存使用总结

    2023-11-15 09:55:12
  • SQL Server实现分页方法介绍

    2024-01-15 12:54:45
  • 下载golang.org/x包的操作方法

    2023-07-11 16:54:04
  • Python字典和列表性能之间的比较

    2022-08-08 12:49:58
  • zabbix通过percona插件监控mysql的方法

    2024-01-23 04:51:22
  • python路径的写法及目录的获取方式

    2023-10-22 09:26:57
  • 慎用UL列表

    2009-03-25 20:21:00
  • asp之家 网络编程 m.aspxhome.com