您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

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

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 这篇文章主要介绍了JQuery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下

   

第一种方式:

? 1 2 3 4 $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello World click"); });

第二种方式:

? 1 2 3 $('#clickmebind').bind("click", function(){ alert("Hello World bind"); });

第三种方式:

? 1 2 3 4 $('#clickmeon').on('click', function(){ alert("Hello World on"); }); });

 

注意:第三种方式只适用于jquery 1.7以上的版本
源码如下:

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 <!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>