返回列表 发新帖

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

476.9k 9
swmozowtfl 发表于 2015-7-9 23:23:08|湖北 | 查看全部 阅读模式
这篇文章主要介绍了jquery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下
) l! u: P5 U' D5 N# d) ~5 w: S( a第一种方式:8 Q" n) n  E( y" P7 q7 }
$(document).ready(function(){
2 n& J) A3 J4 b! t  \$(#clickme).click(function(){
: V" s  L5 o* w$ z1 s: d1 galert(hello world click);2 ~' p% k! r% T( {
});
( x6 v! y+ ~; E8 |8 n( s( f2 ?5 w6 w第二种方式:* [0 `4 B5 J* C$ H1 N
?
( \$ g1 y  J$ f, `  |. J1
5 F9 X) H1 Z) x% {25 c4 I) e4 G1 y# |& x5 {, k
3
- K8 W1 n' |! z( p4 h$('#clickmebind').bind(click, function(){* k2 R, X) t+ k# {" p
alert(hello world bind);
; s; [& M- {6 p3 M* y});
; |; j, j' ^3 [! p! [# f& k7 U第三种方式:9 O4 G# e4 Q) ^5 v- D" }  c
$('#clickmeon').on('click', function(){
/ i2 n1 z. b5 _: e; q4 \! B% p! qalert(hello world on);
/ s7 r$ W' t2 g4 r9 h$ e! S8 Z});4 v% O4 t) I% M3 ~9 T8 @
});- ~0 l" `! B0 s% T4 ~2 |4 z
注意:第三种方式只适用于jquery 1.7以上的版本
* q$ V/ b7 ]* [0 q5 Q/ t- \源码如下:
8 V+ R1 s7 Q' ?<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en >0 o+ Y( y8 }, h* l. p- ]9 d
<html xmlns=>! `4 M# T8 t1 X2 R6 H
<head>
9 s) X9 E. b1 X. t  t: L3 J<meta http-equiv=content-type content=text/html; charset=gb2312 />
' q. m2 z! Q& K5 {0 t6 K, F' x/ E<script type=text/javascript src=js/jquery-1.6.1.min.js></script>
1 _% z+ c1 ]7 E! h6 s4 ?<script type=text/javascript src=js/jquery.validate.js></script>
  i) p* N7 d, |* p) P<script type=text/javascript src=js/jquery.metadata.js></script>3 n% `/ i: A8 W3 p
<script type=text/javascript src=js/messages_zh.js></script>
  M7 G$ D: Z! |( u/ x5 u$ g<style type=text/css>  B8 b9 @' t% \; D' l- S7 G
#frm label.error {
- M. v( ~1 @) @: P: t+ f2 e1 `3 m: H  Acolor: red;
  z) Y( g$ L" |* K}0 P7 t3 r; L5 X) N
</style>
0 N$ |( H- D# E1 e</head>
! n8 ~( B6 U: i' {8 R8 ?% P" O<script type=text/javascript>( l) C9 L' c/ _5 B8 P) J% c
$(document).ready(function(){3 i/ W9 c/ r$ k! z  X
$(#clickme).click(function(){
6 ^) X( ]! [) p1 q5 @2 @; w2 l  Halert(hello world click);
1 ^7 `$ @8 u7 ]/ L# N' P});
6 o* k$ G" j1 Y0 h) Q7 h$('#clickmebind').bind(click, function(){" u: n! E; @( ~
alert(hello world bind);
4 S0 p2 f  f, ], M});
( C( W6 f! K6 w$ ^( }$ V$('#clickmeon').on('click', function(){; ^  F3 ^# Y. i
alert(hello world on);
$ C$ {2 e9 j/ r' e5 V9 |7 `});
6 g, B* d1 x2 e$ X});9 E, m/ V" n9 P0 W8 U% X( Z  ?
</script>" R" q; d8 v1 f
<body>3 C5 A3 v& r% h
<label></label>( D: U( |' {# x% l
<form id=frm name=frm method=post action=><label>用 户 名:
# J9 h, s; A  t. `<input type=text name=username id=username />
3 W6 G( A2 g1 N/ C6 @! b6 z</label>
& j0 d" g/ A8 N$ N- J6 `5 Z<p>
9 C, ?! X; e$ B6 `7 f( p) E9 G<label>邮 编 :<label></label></label>, M* o" R8 d* {7 {& z
<label>, b+ N& `( R4 ~- U$ o
<input type=text name=postcode id=postcode />
& F5 r0 z5 s, `/ v4 x+ h# |<br />
" D3 V- k2 W) R4 _* e( }</label>6 g9 A) O: {# a5 F
</p>; \& X: b+ R& f: ]( V# ]# v
<p><label>数 字 :
; g3 a3 w$ Y- o) M; m2 x) l<input type=text name=number id=number />; `( y$ s# m, c! L  T5 C* \
</label>( t6 ?4 |( }0 x3 f% k8 P
<br /><label>身份证号:
* Z! p( k$ u9 {3 x2 e# l<input type=text name=identifier id=identifier />
8 ?8 G9 J6 z. `3 R</label>
- D- F" X, B6 U8 T# P<label>
, g' s) ?  ~2 G( e8 r+ @! w  _<input type=button name=clickme id=clickme value=click me />/ U# F+ ?  z1 U4 ~) W3 o2 ]8 P9 ]
</label>
3 c2 z; W7 ~; {) n) q$ Y1 w, U<label>+ W/ U4 Q# T, e7 p& _5 Y; D
<input type=button name=clickmebind id=clickmebind value=clickme_bind />' D$ h6 @* w1 s4 N* Y! j1 q
</label>! G5 ^1 T' Y. N- H
<label>
9 [' v% B+ d. [5 C<input type=button name=clickmeon id=clickmeon value=clickme_on />+ h9 \  {8 T& y) x  e. ^: Z( M5 @
</label>
, t% d1 M! ?" e* h3 G# L</p>
0 I1 g2 L8 c/ U* i0 c</form>
+ z5 O" ]9 v2 P& l% H. _8 k</body>
( O; Y7 |! G7 m1 i% a$ S" D0 A" K: E) ~
更多网页制作信息请查看: 网页制作

回复|共 9 个

Acropozelan 发表于 2015-12-9 22:46:48|美国 | 查看全部
哈哈 怎么说来眼睛小真的很好 哈 哈哈~~~~
effoggikeftor 发表于 2015-12-9 22:46:53|美国 | 查看全部
貌似我真的很笨????哎
bqtklouu 发表于 2015-12-9 22:47:23|美国 | 查看全部
只是本着“看贴(虽然看不懂)回贴,利人利己的中华民族优秀传统美德”,顺便赚点积分。
alapScady 发表于 2015-12-9 22:47:43|美国 | 查看全部
我怎么说那?~!
wwdu926a 发表于 2016-2-12 14:41:31|英国 | 查看全部
现在做什么网站好?
effoggikeftor 发表于 2016-2-12 14:42:10|美国 | 查看全部
先踹你一脚再说~~~~~~
wwzcdenleclv 发表于 2016-2-12 14:42:16|日本 | 查看全部
老大,我好崇拜你哟
effoggikeftor 发表于 2016-2-12 14:42:30|日本 | 查看全部
晚安 别让小嫁再郁闷了 -
wwdu926a 发表于 2016-2-12 14:42:57|罗马尼亚 | 查看全部
对于这种刚发的帖子,我总是毫不犹豫的顶了。如果火了就是个前排,可以混个脸熟,说不定谁好心就给粉了…稳赚不赔;如果沉了就感觉是我弄沉的,很有成就感,还能捞经验。

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

得知互动是一个融创意、设计、开发、营销、生活、互联网于一体的专业交流分享平台。
Copyright © 2026 得知互动-专注Ai与站长技术交流社区-Ai交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表