这篇文章主要介绍了jquery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下
I( M& K" W9 Q第一种方式:. N5 X4 \# {+ ` T" ]) Z/ _1 g$ Y
$(document).ready(function(){
0 C( r( H% U% [9 p k$(#clickme).click(function(){
* {) f+ U* V9 ~+ ?7 e$ Yalert(hello world click);2 i7 R5 a' _ \, b
});9 z- h% n( w! Y7 U% E }# N- S
第二种方式:
6 Z" N: g4 x- ?+ }/ f9 h?5 b7 [- b/ p0 l( r7 w
1
6 E* M; S9 [2 r- v25 |) f* ?+ d$ C# D
3' v! V' d! T, D1 R
$('#clickmebind').bind(click, function(){
& G; |$ C8 \, J; a6 Y5 b3 Malert(hello world bind);
4 s+ L& E) U; E8 a});2 h C% @# ?% c, I. a9 u0 T
第三种方式:+ K) M3 w- ^3 a+ A
$('#clickmeon').on('click', function(){* Y M& t" l9 y6 p2 u# b5 `
alert(hello world on);; B" E# |# h e. [
});4 Z; _4 a# i; C: ~! ]9 `1 q+ Y; ? M& n9 [
});
# R0 o W4 g' W: l* w0 e" E注意:第三种方式只适用于jquery 1.7以上的版本
# D% y0 Y! R8 P源码如下:
$ \* t3 r9 S( D! K<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en >& c1 q2 `& m7 W& k% E. T( L, Z
<html xmlns=>
2 d# w: f% ]- a0 W3 m; q+ Z<head>5 _+ d: Y! X, k( k) w( }
<meta http-equiv=content-type content=text/html; charset=gb2312 />2 v" b/ _' ^% ~0 D+ E
<script type=text/javascript src=js/jquery-1.6.1.min.js></script>
" e6 U% J* T: M. d3 z+ n: I% n" {<script type=text/javascript src=js/jquery.validate.js></script>
b+ g5 G6 F: a7 X7 @% x8 ^7 P! T<script type=text/javascript src=js/jquery.metadata.js></script>; t% M/ r% ?% K( {4 O
<script type=text/javascript src=js/messages_zh.js></script>- y) u; X' P2 [) O4 j) z
<style type=text/css>
$ R; r% R6 Z5 i% `6 m. Q( W#frm label.error {) n2 a3 ?/ E! M: r. [
color: red;
2 V S: _4 G8 \; l2 w}" ~" ^: ^4 [1 d Z4 `
</style>4 z3 i: c7 |5 u8 S
</head>7 M! H4 `5 T: M. U4 @% V5 n
<script type=text/javascript>
2 D5 I% @$ m" O3 b4 ~( \$(document).ready(function(){" y5 s) r) ]2 R
$(#clickme).click(function(){
& {4 v3 P ~( Y# halert(hello world click);
8 n1 I F0 ]* }; s});7 A2 q! \0 C) k& u
$('#clickmebind').bind(click, function(){, B, r* n5 y. m" q6 z
alert(hello world bind);1 D( N9 Z9 ?8 |
});! W6 @ [) F( N: `6 p& B5 W
$('#clickmeon').on('click', function(){
$ K" y; d3 g3 z+ |alert(hello world on);# F4 c% X/ b1 y( z+ ~7 o0 C7 A
});
( R6 F$ F6 b! F2 {' n});
( |3 B9 d. K' N& T! k$ \</script>- u5 I. I$ ]) S+ t* d
<body>
" `8 Y1 O- T1 a<label></label>
# x% X+ s- D, ?4 g+ B! P<form id=frm name=frm method=post action=><label>用 户 名:
1 X. z5 H8 C, v- h' D<input type=text name=username id=username />
$ L6 z3 B/ \. A3 ~</label> `& _/ F3 j2 h) C* C+ h% ~
<p>+ u3 I, u& T. M
<label>邮 编 :<label></label></label>
, d& n2 i# K& c<label>9 c$ l& k4 m; @$ p
<input type=text name=postcode id=postcode />
7 {8 U0 o) ?4 T9 _( G<br />/ L- k: E- x4 _, x( Q, U
</label>3 n$ H7 i$ k7 k4 ~3 H( S% X. m2 u8 z
</p>. S* {. o! g1 s" \3 `7 O
<p><label>数 字 :
8 K ^( |; D+ B- }# P, Z<input type=text name=number id=number />
# s0 \* H$ {- C2 s x8 A* N" \</label>
* z; Q0 l3 Q) ]' b* g; X/ c<br /><label>身份证号:1 q8 D5 K4 U8 g$ _
<input type=text name=identifier id=identifier />
( ?6 I W; N$ H! {% o2 Z, v</label>7 q, L8 `5 U$ @7 N; P7 s* S3 c& A
<label>
0 n3 M8 a2 s0 x# u4 z<input type=button name=clickme id=clickme value=click me />0 Q1 ?5 f0 Y+ w
</label>6 n$ B' k% k% ]( e7 z
<label>
) G$ _ W7 g0 q# B0 z/ `1 p<input type=button name=clickmebind id=clickmebind value=clickme_bind />
. i5 r+ |" f- `* v</label>! P) Q; F u. J. O% }" W) r, e
<label>7 P* ]" B O0 Y4 Z' o: s5 ]
<input type=button name=clickmeon id=clickmeon value=clickme_on />
8 W- C, }* l8 g/ Z4 U& K1 Q</label>. R, y& c4 ~- ] t! P
</p>
: \* P9 _' ^4 z& b6 m</form>; }2 _* H( M, R3 H& m
</body>
5 U2 V& u( l+ p, B+ K& R9 v" {
& S$ |; ?: O8 ]* w+ E) d5 X# I更多网页制作信息请查看: 网页制作 |
|