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

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

第一种方式：

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

第二种方式：

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

第三种方式：

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

注意：第三种方式只适用于jquery 1.7以上的版本

源码如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
2. <html xmlns="http://www.w3.org/1999/xhtml"> 
3. <head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
5.  
6. <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> 
7. <script type="text/javascript" src="js/jquery.validate.js"></script> 
8. <script type="text/javascript" src="js/jquery.metadata.js"></script> 
9. <script type="text/javascript" src="js/messages_zh.js"></script> 
10. <style type="text/css"> 
11. #frm label.error { 
12. color: Red; 
13. } 
14. </style> 
15. </head> 
16. <script type="text/javascript"> 
17.  
18. $(document).ready(function(){ 
19. $("#clickme").click(function(){ 
20. alert("Hello World click"); 
21. }); 
22.  
23.  
24. $('#clickmebind').bind("click", function(){ 
25. alert("Hello World bind"); 
26. }); 
27.  
28. $('#clickmeon').on('click', function(){ 
29. alert("Hello World on"); 
30. }); 
31. }); 
32.  
33. </script> 
34. <body> 
35. <label></label> 
36. <form id="frm" name="frm" method="post" action=""><label>用 户 名: 
37. <input type="text" name="username" id="username" /> 
38. </label> 
39. <p> 
40. <label>邮 编 :<label></label></label> 
41. <label> 
42. <input type="text" name="postcode" id="postcode" /> 
43. <br /> 
44. </label> 
45. </p> 
46. <p><label>数 字 :  
47. <input type="text" name="number" id="number" /> 
48. </label> 
49. <br /><label>身份证号： 
50. <input type="text" name="identifier" id="identifier" /> 
51. </label> 
52.  
53. <label> 
54. <input type="button" name="clickme" id="clickme" value="click me" />  
55. </label> 
56. <label> 
57. <input type="button" name="clickmebind" id="clickmebind" value="clickme_bind" /> 
58. </label> 
59. <label> 
60. <input type="button" name="clickmeon" id="clickmeon" value="clickme_on" /> 
61. </label> 
62. </p> 
63. </form> 
64. </body> 
65. </html>