JQuery在循环中绑定事件的问题详解
2024-08-25 14:17:15
JQuery在循环中绑定事件的问题详解
有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说
1
2
3
|
<input type= "text" name= "username" id= "username_1" value= "" /> <input type= "text" name= "username" id= "username_2" value= "" /> <input type= "text" name= "username" id= "username_3" value= "" /> |
现在有个循环,在页面载入的时候需要给这每个元素增加一个onclick事件,很容易想到的写法就是
1
2
3
4
5
6
7
|
$( function (){ for ( var i=1; i<=3; i++){ $( '#username_' +i).onclick( function (){ alert(i); }); } }); |
这么写是错误的。。。
错误的原因以及类似的错误分析详见这篇文章《深入理解JQuery循环绑定事件》
然后改成下面的就对了
1
2
3
4
5
6
7
8
9
10
|
$( function (){ for ( var i=1; i<=3; i++){ $( "#username_" +i).bind( "click" , {index: i}, clickHandler); } function clickHandler(event) { var i= event.data.index; alert(i); } }); |
举例:
$(function(){
for(var n=1;n<menulist.length;n++){
$(".rm-container #level"+menulist[n].id+" a").bind("click", {index: menulist[n].name}, clickHandler);
}
function clickHandler(event) {
var i= event.data.index;
alert(i);//输出a标签的名字
return false;//点击a之后,控制页面不跳转
}
});
最新文章
- Cell右滑 多个编辑选项栏
- zTree和SweetAlert插件初探
- PKU 1007
- C# 获取文件路径
- ie,火狐,谷歌 select清除默认样式 设置新的样式
- MVC 基架不支持 Entity Framework 6 或更高版本
- shell脚本 空格
- OA系统如何使用考勤机数据
- Thinkphp整合最新Ueditor编辑器
- mvc和三层架构到底有什么区别
- Context Switch and System Call
- github import repository创建github仓库
- python3基础视频教程
- pyspider解析
- JAVA验证身份证格式及合法性
- canvas-star0.html
- php 获取顶级域名
- php 安装过程 第二次探索
- JAVA设计模式详解(五)----------适配器模式
- n阶方阵A可逆充分必要条件