这篇文章主要介绍了jquery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下
$ s1 M: i; d/ V* z第一种方式:
" I9 E% O: c0 V8 f$(document).ready(function(){
# v, R7 @+ k; r$(#clickme).click(function(){7 v+ T% v [ b5 A3 | E7 n4 F: p
alert(hello world click);' @: O( K6 g8 H9 y5 j
});
+ @+ a" O. U, v( e- U第二种方式:, N! z9 ^, O% c# M. J
?
4 ~6 T- f3 E$ s1
! I0 s7 b) E' E. |( L6 s0 q, x25 E# v& y2 W4 B
3* g, w0 i: Y2 @: ~5 n
$('#clickmebind').bind(click, function(){
/ ~: T, d& e) G9 F: L( a1 u6 ialert(hello world bind);
. T( {1 p+ c5 n/ r( s+ x( h# `});
7 Y2 a2 n6 K! k9 ~$ `4 B. X L/ m第三种方式:" f5 v+ X' K7 Q; `7 W# c
$('#clickmeon').on('click', function(){
0 w7 n( C' G$ O0 e' Talert(hello world on);
# u2 c3 z) J$ V" j5 R3 P9 W});( L; g6 j0 D9 C, p2 B
});6 V4 H9 Q: i0 P' K9 f9 c: r( k
注意:第三种方式只适用于jquery 1.7以上的版本
6 v; y& ?# i, r& o源码如下:7 a8 [1 Q& S* |8 F; f( h* ~( O
<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en >1 P% L3 l2 i; } t/ L# ^5 v7 G0 Y
<html xmlns=>
0 W% I" h6 Y0 P5 x& o& [- T/ n1 `<head>
2 k, ~! z o0 V/ l# |<meta http-equiv=content-type content=text/html; charset=gb2312 />" N7 e# r, l+ z+ c$ J
<script type=text/javascript src=js/jquery-1.6.1.min.js></script>
' A4 S( k) Q+ p2 k! @5 c5 C9 ~$ Z<script type=text/javascript src=js/jquery.validate.js></script>* e- c+ A( \. z) j/ [# w$ s
<script type=text/javascript src=js/jquery.metadata.js></script>
$ z5 Z# N0 g2 ]7 v<script type=text/javascript src=js/messages_zh.js></script>& R( j* {. P+ p* E2 ~
<style type=text/css>2 s2 P* t" R4 C) |4 y. o
#frm label.error {# O* C4 `7 K% Z0 B9 d
color: red;! j% r$ d8 k( w L* E
} b9 W$ n* ^& Q: Z* E& y/ R
</style>
$ e4 l: |" E E</head>! R2 e- X- g# b+ j! t8 ~
<script type=text/javascript>
7 }+ R. P' V4 g1 M3 F6 N5 M$(document).ready(function(){
' u! r& R2 x% e6 _$(#clickme).click(function(){/ p; a+ W# g: }5 x
alert(hello world click);
; G) W5 \$ z* ?; _% p9 b});
4 u( a5 K4 U; v7 s$ ` K$('#clickmebind').bind(click, function(){
6 u7 ^4 y4 H) G. _alert(hello world bind);4 T4 g, z1 S8 Y" ]) h2 i* H
});1 T c- A, f, I, ]; N
$('#clickmeon').on('click', function(){
+ G# h- n1 \7 K3 {& k2 C4 }! d% ialert(hello world on);" m. |3 y# s7 B. B7 n# f. B! p* ?$ [) A
});) R! f) S" _$ K8 @ I
});
8 n- T9 h; O7 }+ u</script>
8 {. v y9 t7 C# W<body>
* o1 Q. Q5 V/ O<label></label> m T0 Q5 ^% t0 {
<form id=frm name=frm method=post action=><label>用 户 名:$ ^- N1 x/ l* m- s3 p4 g
<input type=text name=username id=username />7 M, @" {! Y* M
</label>' v, |) l7 `, F$ b X! ?
<p>
4 V( [ B" @. c8 h2 G0 \, c4 x<label>邮 编 :<label></label></label>$ l/ w! b$ T: D' k
<label>
( d. g9 s7 _$ I<input type=text name=postcode id=postcode />
" d! ~: i0 j; y1 j; n<br /># M! ^( ^# U/ N' n
</label>1 b3 O T' B& l. I" F, G/ C0 O5 n
</p> d$ s0 l3 |$ |
<p><label>数 字 :) m/ X( r, k2 u8 H% L+ \
<input type=text name=number id=number />
! Z3 t$ x0 A- J! n; i</label>* E1 A# s8 Z4 z5 z) i
<br /><label>身份证号:" X- Z# W! S! G+ C
<input type=text name=identifier id=identifier />
+ k6 C) D# b% L7 o7 `</label>
/ Q. s9 k4 B( p<label>- s. @/ [1 Y, Z; n% ^$ K0 y9 w
<input type=button name=clickme id=clickme value=click me />5 t8 u$ d9 J' j, f
</label>
# a8 B( h( R4 n: o3 j<label>
* q" j: u: G. S, \/ z0 P<input type=button name=clickmebind id=clickmebind value=clickme_bind />2 _' U9 I( h( |1 n! g( @4 A
</label>
0 Q. {9 F" H7 t, \<label>
: O! J9 f. n5 t4 V4 _0 W: `<input type=button name=clickmeon id=clickmeon value=clickme_on />3 Z4 ?) Y: v1 F# ?$ F4 V' E# B
</label>( U# _" D; v+ M0 ?. J" U
</p>
$ K! ]. { @# K! I: _</form>0 W" U$ H8 _$ J7 P2 `
</body>
0 r2 O7 g% f( Y: {! N% R8 P" K- q. C, B% ]$ }! T
更多网页制作信息请查看: 网页制作 |
|