这篇文章主要介绍了jquery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下2 V, G |* x, W' ~2 \6 v8 a- | x
第一种方式:, P$ o( i( `1 a D: o
$(document).ready(function(){
5 w* _' R8 R/ b# N& v, i$(#clickme).click(function(){) w7 u" r, X5 h4 w% p1 l8 i
alert(hello world click);: U3 n: r( l+ g8 Q3 w) `
});. L( i! n( c' W! t5 L
第二种方式:' F, b* X$ C# {
?
$ m4 E" |: e. d$ O6 a: p. G1
( O( K, U+ ^: a% R$ ]* g/ q2" z5 q% a% E7 d, o' @6 d V
3
4 R$ Y- r9 a! I) _$('#clickmebind').bind(click, function(){" l4 L( {# j: J
alert(hello world bind);* W& ^4 x" i+ \0 p
});
: R( f+ D) e" C2 N2 W; b0 p第三种方式:
( n" f8 c. h2 |- s$('#clickmeon').on('click', function(){+ B0 h% W4 z! b: s% p' h
alert(hello world on);4 S) R# r* O* U3 Q+ F
});
) E7 L; y% o) o L}); i% b$ H4 g" s; O2 c( w: z1 e( b
注意:第三种方式只适用于jquery 1.7以上的版本$ T" m; z w8 q; @3 [ k
源码如下:
3 f9 V* K" Q- p8 i: C! F<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en >
: x: Q. O# W( W1 A# c- b9 {0 A/ D<html xmlns=>. t0 F( ^: T P' d4 }
<head>3 L# A4 }1 R9 ^! D) V5 x( N
<meta http-equiv=content-type content=text/html; charset=gb2312 />8 x1 n8 l r" }2 F
<script type=text/javascript src=js/jquery-1.6.1.min.js></script>
# U$ F! h7 M- c& K<script type=text/javascript src=js/jquery.validate.js></script>
) ]5 i4 C" u. D5 X$ d<script type=text/javascript src=js/jquery.metadata.js></script>
/ a3 @% X7 C; F4 I<script type=text/javascript src=js/messages_zh.js></script>
7 w2 V [& \3 p1 V<style type=text/css>
3 {6 Y8 z' l F; o& ^#frm label.error {
4 q3 x5 J7 D, h) S% ccolor: red;+ g3 t% y: X- T( M
}) K; e9 x" A- O" C% L) i4 q5 N9 p1 G
</style>- b0 Z% P& c j; W \1 u1 c) X
</head>
- N" D$ D4 X( w- s9 q' y( A/ O<script type=text/javascript>& C6 q, M2 P* a6 @6 I9 R
$(document).ready(function(){
5 ]7 q& i0 b" K7 O& h8 f8 k$(#clickme).click(function(){* x- `4 y, F1 i( [ |
alert(hello world click);
& \2 i+ ^0 s+ F& [});7 s/ a2 x* j* ~# i; ` q2 ]
$('#clickmebind').bind(click, function(){
# K$ I8 j! F: ?' Zalert(hello world bind);
; o& ]) s8 P$ j2 y});' {5 B/ Y- c7 ?0 T: {1 X
$('#clickmeon').on('click', function(){: m" m# a/ L2 @% t+ @
alert(hello world on);8 W" h" G- W V, m: u
});6 y1 o- v* ^2 n
});
6 K. a' w0 f6 {6 e g9 G d</script>
2 O% {" U' |; z) ^6 @. |0 {0 V<body>" n; h1 t( ]/ o# }. Q, k- i
<label></label>
# B* v$ [4 z9 z+ p4 s<form id=frm name=frm method=post action=><label>用 户 名:8 J6 N O6 _* i) T- G" b# v
<input type=text name=username id=username />
, \1 h W6 r7 W. w</label>2 i8 H, e" T, o8 T# p
<p>
2 j' U* f6 Y9 g7 @<label>邮 编 :<label></label></label>
! ]$ m& E K& {% _% X8 `. F<label>
- K/ Y2 k6 K$ Q. r3 t, \# n<input type=text name=postcode id=postcode />) I( H% H0 i- n6 l9 D$ \( E2 h
<br />
- Q; C3 K' [0 k B! H</label>8 @* H9 j% P9 y* n; k# w- }8 U- {
</p>3 d3 C( u5 d! s& h" S' H
<p><label>数 字 :: J6 {2 |" t- i& x
<input type=text name=number id=number />5 c2 T& e2 F) q( t5 y
</label>
" G! {$ J: f$ O* z<br /><label>身份证号:
# g+ K/ B& I+ }<input type=text name=identifier id=identifier />! ]5 _; S* _, S( M" L; s
</label>
) ?( D# ~2 T6 q |' x" C<label>' M% o. ^7 Z) w4 [ I! \' }
<input type=button name=clickme id=clickme value=click me />: Q) a5 R) M( f' [
</label>! l$ Z. u$ b* U% l o$ R' o. l7 H, N
<label>
8 P' @3 z/ C7 B5 m" L- q<input type=button name=clickmebind id=clickmebind value=clickme_bind />" a! n B( x2 Z7 r# C j9 m
</label>
2 {1 r. U" Q7 W<label>7 y, c! U& _( I6 t+ f
<input type=button name=clickmeon id=clickmeon value=clickme_on />
' m( D/ X3 A% h7 C1 _/ o9 l9 T</label>
. L! M2 O! ?$ z, ~9 V</p>) t" s- F5 H8 Y
</form>' z7 ]: J: o" H+ v
</body> / C" l/ R$ m" e+ n
. @+ k5 \2 v+ {6 f2 |3 y
更多网页制作信息请查看: 网页制作 |
|