返回列表 发新帖

jquery调用绑定click事件的3种写法

476.6k 9
swmozowtfl 发表于 2015-7-9 23:23:08|湖北 | 查看全部 阅读模式
这篇文章主要介绍了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更多网页制作信息请查看: 网页制作

回复|共 9 个

Acropozelan 发表于 2015-12-9 22:46:48|美国 | 查看全部
哈哈 怎么说来眼睛小真的很好 哈 哈哈~~~~
effoggikeftor 发表于 2015-12-9 22:46:53|美国 | 查看全部
貌似我真的很笨????哎
bqtklouu 发表于 2015-12-9 22:47:23|美国 | 查看全部
只是本着“看贴(虽然看不懂)回贴,利人利己的中华民族优秀传统美德”,顺便赚点积分。
alapScady 发表于 2015-12-9 22:47:43|美国 | 查看全部
我怎么说那?~!
wwdu926a 发表于 2016-2-12 14:41:31|英国 | 查看全部
现在做什么网站好?
effoggikeftor 发表于 2016-2-12 14:42:10|美国 | 查看全部
先踹你一脚再说~~~~~~
wwzcdenleclv 发表于 2016-2-12 14:42:16|日本 | 查看全部
老大,我好崇拜你哟
effoggikeftor 发表于 2016-2-12 14:42:30|日本 | 查看全部
晚安 别让小嫁再郁闷了 -
wwdu926a 发表于 2016-2-12 14:42:57|罗马尼亚 | 查看全部
对于这种刚发的帖子,我总是毫不犹豫的顶了。如果火了就是个前排,可以混个脸熟,说不定谁好心就给粉了…稳赚不赔;如果沉了就感觉是我弄沉的,很有成就感,还能捞经验。

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

得知互动是一个融创意、设计、开发、营销、生活、互联网于一体的专业交流分享平台。
Copyright © 2026 得知互动-专注Ai与站长技术交流社区-Ai交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表