返回列表 发新帖

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

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

回复|共 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技术交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表