JQuery在循环中绑定事件的问题详解


Posted in Javascript onJune 02, 2016

有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说

<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事件,很容易想到的写法就是

$(function(){
 for(var i=1; i<=3; i++){
  $('#username_'+i).onclick(function(){
   alert(i);
  });
 }
});

这么写是错误的。。。

错误的原因以及类似的错误分析详见这篇文章《深入理解JQuery循环绑定事件》

然后改成下面的就对了

$(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);
 }
});

以上这篇JQuery在循环中绑定事件的问题详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
一段实现页面上的图片延时加载的js代码
Feb 11 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
使用AOP改善javascript代码
May 01 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
Javascript字符串拼接小技巧(推荐)
Jun 02 #Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 #Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 #Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 #Javascript
深入理解jQuery事件绑定
Jun 02 #Javascript
jQuery获取单击节点对象的方法
Jun 02 #Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 #Javascript
You might like
php下过滤HTML代码的函数
2007/12/10 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Python下的subprocess模块的入门指引
2015/04/16 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
python绘制简单折线图代码示例
2017/12/19 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Django 返回json数据的实现示例
2020/03/05 Python
什么是python的列表推导式
2020/05/26 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
计算机专业毕业生的自我评价
2013/11/18 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
医院护士工作检讨书
2014/10/26 职场文书
承诺函范文
2015/01/21 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书