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

更新时间：2016年06月02日 10:14:53 投稿：jingxian

下面小编就为大家带来一篇JQuery在循环中绑定事件的问题详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

有个页面上需要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在循环中绑定事件的问题详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

用jQuery解决IE不支持的option disable属性
使用jQuery解决IE不支持的option disable属性
2009-05-05
jquery实现下拉菜单的手风琴效果
这篇文章主要为大家详细介绍了jquery实现下拉菜单的手风琴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
通过JQuery，JQueryUI和Jsplumb实现拖拽模块
这篇文章主要介绍了通过JQuery，JQueryUI和Jsplumb实现拖拽模块，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
2019-06-06
轻松搞定jQuery.noConflict()
轻轻松松搞定jQuery.noConflict()，jQuery.noConflict()背后实现原理值得Web开发者学习了解掌握，感兴趣的小伙伴们可以参考一下
2016-02-02
jQuery实现验证年龄简单思路
本文给大家分享的是jQuery实现验证年龄简单思路，让用户填出生年月，然后根据当前时间计算是否小于网站要求的年龄，小于就提示，有需要的小伙伴可以拿去直接使用。
2016-02-02
jQuery实现MSN中文网滑动Tab菜单效果代码
这篇文章主要介绍了jQuery实现MSN中文网滑动Tab菜单效果代码,基于jQuery鼠标事件实现页面元素属性动态切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
jQuery实现用户注册的表单验证示例
用户注册的表单往往是需要进行验证的，否则会有一些不否合规则的数据入库，后果会不堪设想，下面为大家详细介绍下通过jquery是如何实现的，下面有个示例，感兴趣的朋友可以参考下
2013-08-08
jquery删除指定子元素代码实例
这篇文章主要介绍了jquery删除指定子元素代码实例,本文使用较简单的方法实现了这个需求,代码一看就懂,需要的朋友可以参考下
2015-01-01
jQuery实现提交表单时不提交隐藏div中input的方法
这篇文章主要介绍了jQuery实现提交表单时不提交隐藏div中input的方法,结合实例形式分析了通过设置input的disabled属性实现隐藏input提交的操作技巧,需要的朋友可以参考下
2019-10-10
JQuery插件fancybox无法在弹出层使用左右键的解决办法
本篇文章主要是对JQuery插件fancybox无法在弹出层使用左右键的解决办法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12