返回列表 发新帖

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

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

回复|共 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客服 返回顶部
快速回复 返回顶部 返回列表