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 相关文章推荐
js遍历子节点子元素附属性及方法
Aug 19 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
用原生js做单页应用
Jan 17 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
Vue实现购物车基本功能
Nov 08 Javascript
JavaScript仿京东轮播图效果
Feb 25 Javascript
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中使用Oracle数据库(1)
2006/10/09 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
用于table内容排序
2006/07/21 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
Vue官网todoMVC示例代码
2018/01/29 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
Python学习之asyncore模块用法实例教程
2014/09/29 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
Djang中静态文件配置方法
2015/07/30 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
pywinauto自动化操作记事本
2019/08/26 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
什么是设计模式
2012/06/17 面试题
个人简历自我鉴定
2013/10/11 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
大学四年个人总结
2015/03/03 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书