这篇文章主要介绍了jquery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下7 ]6 q. h: M; @2 s
第一种方式:
( i4 J6 K4 @8 Q* c4 A, z$(document).ready(function(){
1 ?5 E4 n' G; E$(#clickme).click(function(){
$ U. f6 q7 B# c0 Jalert(hello world click);1 m/ U/ `( N2 p: E! R j
});$ [! L$ v1 E, P7 o
第二种方式:
|$ r! F" Z" @! E" x" Q* u?
5 y u O4 g' |) u10 @7 `8 ^6 [- w' z
2
3 n# a8 ?4 @( z3 r; Q0 r3
& @. S4 Q3 M6 \" R' S# w/ |- J$('#clickmebind').bind(click, function(){
9 {. n+ \" F! Y) halert(hello world bind);' N. \, }5 {. u- `7 x( @% ^
});
1 z7 \5 K8 f# Y2 X+ l1 ]. @; g3 L第三种方式:
& j1 x" T. `: c; R6 L5 u$('#clickmeon').on('click', function(){" e4 a9 t" x2 j7 X
alert(hello world on);) x! |0 w7 g3 m% z; R
});6 N- B9 h5 k; n
});
' B1 z7 T7 V* Y注意:第三种方式只适用于jquery 1.7以上的版本
* l/ W8 {8 q8 Q" e源码如下:
( q5 S u( ~" _<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en >
X9 U! h. w. q( Q# L1 A<html xmlns=>
; O# l( x- E( n. r<head>! l. y `, l5 ^; n, _( W1 u; S
<meta http-equiv=content-type content=text/html; charset=gb2312 />
% k/ D" u& b( C* \9 J' k<script type=text/javascript src=js/jquery-1.6.1.min.js></script>" B& V7 l. L5 e) e9 |
<script type=text/javascript src=js/jquery.validate.js></script>
6 I" D5 `& `$ K<script type=text/javascript src=js/jquery.metadata.js></script>
, R; C$ [5 m& R6 k<script type=text/javascript src=js/messages_zh.js></script>
3 h7 \$ |' P7 @9 F<style type=text/css>
$ i- a- B' g& o4 O% a5 ^#frm label.error {
3 C* Y$ u5 |+ C5 E! C1 p3 Bcolor: red;
. p. ~5 l8 R' \7 b9 J}
1 x+ j# J8 m; c0 b4 l</style>
, N6 b3 O0 s7 _" f! E i" j) q</head># Y! z: Z' I4 ^, V, i8 j" E
<script type=text/javascript>
! }* y1 _1 P: F! t7 K' R$(document).ready(function(){ l3 a- R% H" ? s
$(#clickme).click(function(){& X5 ~1 A9 U5 j* y" F
alert(hello world click);
$ a9 U7 }8 I1 o) ^* P. @});& N. Q5 V" }: D6 Y: R
$('#clickmebind').bind(click, function(){1 p# _6 q* g; K0 Q$ r; u
alert(hello world bind);) C# @- w: g( s/ A! U' a$ Q
});: Z+ C# N- ] w m7 N# c+ S- H
$('#clickmeon').on('click', function(){ s, w2 D- ?/ S' J+ D! C6 m
alert(hello world on);
' Y) T2 W0 S8 Z: j5 n});: Z1 h5 S" J" ~& W- H; |
});
# D) d& R! P* f$ K9 A. k* t</script>
" E8 I% t& y1 R) A<body>+ F' E2 p' c4 I
<label></label>
: \! B3 s8 @; m6 [2 a4 @<form id=frm name=frm method=post action=><label>用 户 名:# j5 T! b1 x1 C% z
<input type=text name=username id=username />
4 ?! d9 ~) c: }. h</label>8 ~6 K+ r5 j1 T- ^& f* k% B. P; j6 s
<p>
- j4 R. v0 z+ q9 e& J<label>邮 编 :<label></label></label>. f% h/ I6 ^& b& [' E# L5 |* m
<label>
* w& |- h; P q& T2 O<input type=text name=postcode id=postcode />
+ t1 i! v* p. Z% U) Z<br />: {& J# s8 M2 z! s" `
</label>
* e- R8 m" W0 S8 `</p>) m* n) ?: T; L' q/ |3 Q& m
<p><label>数 字 :' w2 A+ P9 g9 x) }0 \9 ~
<input type=text name=number id=number />5 `+ t9 m$ J1 I D+ p) c3 Y% ]' e8 s
</label>* m/ U/ _6 l, w3 f
<br /><label>身份证号:4 X$ G; n5 q) K1 u+ Q8 D
<input type=text name=identifier id=identifier />3 f1 C8 l4 [9 Z# X! Q/ C
</label>0 I$ }0 ^9 \7 F' K
<label>
; J" r# {; [) X! E: H% J/ F0 w2 O<input type=button name=clickme id=clickme value=click me />
$ C o; ?5 e: ?" R7 T, S</label>
2 b2 Y! q3 d8 d& R) J) q<label>
/ |) q/ k' Z4 w: Y: R V<input type=button name=clickmebind id=clickmebind value=clickme_bind />/ P! G: u3 j. S" z: F) e: ~( g
</label>/ w! y0 ?& X, f, L* G% I( c
<label>
% k9 f+ S( s& s8 {. |. g<input type=button name=clickmeon id=clickmeon value=clickme_on />! [% |5 Y- E3 ] L+ u; |
</label>- A* M- l; m: {
</p> p; P/ I$ ? |* G+ h
</form>1 s- a8 K0 I0 I
</body>
6 W/ _8 M e! j! x
9 Q" ]8 ?& |8 N* a: |3 A4 D更多网页制作信息请查看: 网页制作 |
|