这篇文章主要介绍了jquery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下
/ o. D* b4 c/ T" [* [; }第一种方式:
H. W/ i. n% x8 m& N$(document).ready(function(){
3 u' |5 @$ m$ n( S. d$(#clickme).click(function(){0 n* |! Z: W1 J: b' m, _7 z% V
alert(hello world click);
) P6 M7 I7 N- A});
# D1 y# Z# ^5 a; R, _4 Z第二种方式:
/ z, C8 w/ [) k8 V- T, V4 O? h8 Y j; y+ A# U D; Z" ^1 t! O
1
/ q6 C# X- f; b( r2
/ [# F6 |9 d5 h* i% M$ h( }8 u3) L# d) ]# G! W6 A. G5 X5 Q
$('#clickmebind').bind(click, function(){0 Q/ \/ Y, r# a8 S+ \: t, B. H) n
alert(hello world bind);
+ S6 _( F. s! G$ w});
6 O* u4 L4 i5 y5 K6 Q$ R$ n第三种方式:
3 c) g5 w w, \$ z" F7 ?. J$('#clickmeon').on('click', function(){
+ L/ Z( J. B4 F# A Yalert(hello world on);
- h, r6 B0 Y% r});1 q5 ~/ ?+ e' z. `1 Z
});
+ w9 u5 {. I# ^注意:第三种方式只适用于jquery 1.7以上的版本! y+ T7 h$ u) g9 Y" J8 J
源码如下:- B$ [+ J7 D7 O% b
<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en >
3 {& D. r6 G( ]$ N<html xmlns=>
4 u) y# [- c+ X+ O0 `<head>2 V( A+ D6 q5 b4 ?
<meta http-equiv=content-type content=text/html; charset=gb2312 />
) [; v4 M- F1 D<script type=text/javascript src=js/jquery-1.6.1.min.js></script>8 g) B$ [" v' G3 @& `
<script type=text/javascript src=js/jquery.validate.js></script>
: M7 ^2 R3 n1 v0 @<script type=text/javascript src=js/jquery.metadata.js></script>
' I1 s4 D7 j/ h6 q<script type=text/javascript src=js/messages_zh.js></script>8 I+ U; a7 ]& B9 h2 A
<style type=text/css>
! h- |; T( }2 q. I#frm label.error {
' V2 s7 O# B: j" ccolor: red;( r& s. ^, G h" O5 O p4 P
}
! g; J: [- R3 V8 ]: u7 |+ j</style>8 E; A& V5 A: D
</head>
6 P! ?. @/ G1 N7 l* V- e; M6 o% P<script type=text/javascript>7 T' U, y% H' V+ Z1 S1 g7 b
$(document).ready(function(){" y3 _* T" T! l# g4 K
$(#clickme).click(function(){
2 g& E% Q& t' g( m l$ lalert(hello world click);
: z8 W. v: a3 E( @& H});
2 c, T7 {; @* \7 [- A N! `: _9 f8 c$('#clickmebind').bind(click, function(){5 a; ^' V( n1 X; E' y- z- j
alert(hello world bind);# H4 W- L& D8 t; e
});8 R6 U! e: C; y
$('#clickmeon').on('click', function(){- s, t, m1 q. w
alert(hello world on);" [) C$ S# J1 ?5 [' i' G ~
});6 h+ X) G0 N, @1 l n# F
});" `$ Y+ [3 p4 ?% W6 h8 T) `( w
</script>
- W1 J' `- a+ N5 l<body>% Z% W1 Q2 Y! h, w- y; e
<label></label>) S, X1 ?' X( ] b, |6 ^1 x5 {( |
<form id=frm name=frm method=post action=><label>用 户 名:+ n0 k4 B; p- S k) m: r
<input type=text name=username id=username />2 U9 } A" }. g G
</label>
. v) Q# G. @$ o3 `& Q; l<p>
* i0 N5 S7 Z+ t4 W, E/ V<label>邮 编 :<label></label></label>* G( W2 C3 @5 P5 o2 a
<label># R3 N3 r# m( w) P0 ?# y; [1 G
<input type=text name=postcode id=postcode />" X+ ~* I# j8 @# N, }2 g
<br />
# l0 S" G" m, }& s1 N5 N</label>
; \* I& s/ p$ ]( ?( c3 x7 e</p>
$ N- O& D: n' U- |- E( W9 h6 Q/ P<p><label>数 字 :5 r. F. h/ P) x/ a
<input type=text name=number id=number />3 K% b5 L( o5 ]9 n. e) a% ]$ _
</label>
, p4 E" M. F1 R# [8 q1 R<br /><label>身份证号:+ [$ x# E" j+ c; F7 E9 ]* Z/ c* H
<input type=text name=identifier id=identifier />6 p9 A( z9 A- {0 Q/ z* A
</label>
* Y9 ?% @8 T* G& l2 [8 E2 X<label>
) a' P8 B- x1 N" X8 G1 g<input type=button name=clickme id=clickme value=click me />; i: ~3 t+ Q+ q2 G7 g
</label>' d3 L; ?' N E0 t6 i2 l' p" S
<label>& J4 j1 C. z6 u
<input type=button name=clickmebind id=clickmebind value=clickme_bind />2 x& s B ?2 p. V4 X) t9 z; l
</label>
& k& [* ?8 ?; C b6 E- }4 D<label>$ ?+ L) i. p$ |( p! F0 u3 z
<input type=button name=clickmeon id=clickmeon value=clickme_on />
% k( z9 H- T5 b& y* K7 B' b; F0 s</label>
4 J5 a8 S1 n( M( r W1 O</p>: u: p* l, ^8 j/ d& a6 {
</form>
, K: e/ n- K0 d+ G: M; ^</body> ! D# l, P8 P9 R
" @/ A5 }% t4 o4 z8 k8 |' Y更多网页制作信息请查看: 网页制作 |
|