脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery循环绑定事件

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的日期选择控件

    基于jQuery的日期选择控件

    终于把jQuery拼写正确了哈，哈哈javascript也是区分大小写的,所以确实不能写错，今天我来和大家分享的是日期选择控件的实现，功能也许不够强大，但是能够满足需求。
    2009-10-10
  • jQuery中add()方法用法实例

    jQuery中add()方法用法实例

    这篇文章主要介绍了jQuery中add()方法用法,实例分析了add()方法的功能、定义及匹配元素中添加与表达式匹配的元素使用技巧,需要的朋友可以参考下
    2015-01-01
  • 解决ztree搜索中多级菜单展示不全问题

    解决ztree搜索中多级菜单展示不全问题

    这篇文章主要介绍了ztree搜索中多级菜单展示不全的解决方法，需要的朋友参考下吧
    2017-07-07
  • jquery操作select详解(取值,设置选中)

    jquery操作select详解(取值,设置选中)

    本篇文章主要是对jquery操作select(取值,设置选中)进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • jQuery实现的页面弹幕效果【测试可用】

    jQuery实现的页面弹幕效果【测试可用】

    这篇文章主要介绍了jQuery实现的页面弹幕效果,涉及jQuery事件响应与页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-08-08
  • jQuery实现鼠标可拖动调整表格列宽度

    jQuery实现鼠标可拖动调整表格列宽度

    这篇文章主要介绍了通过jQuery实现鼠标可拖动调整表格列宽度,需要的朋友可以参考下
    2014-05-05
  • jQuery TextBox自动完成条

    jQuery TextBox自动完成条

    刚开始学jQuery，于是想试试学习效果，所以就做了个这个TextBox自动完成条，练习练习。请牛人们别笑话。
    2009-07-07
  • jQuery怎么解析Json字符串(Json格式/Json对象)

    jQuery怎么解析Json字符串(Json格式/Json对象)

    可以利用jquery或js解析json数据，下面与大家分享下jquery解析json字符串方法，一个是解析Json格式，一个是解析Json对象，感兴趣的朋友可以学习下
    2013-08-08
  • 深入理解(function(){... })();

    深入理解(function(){... })();

    很多朋友不清楚(function(){... })();这几种写法各代表是什么意思，下面小编通过本教程给大家简单介绍下(function(){... })();知识，感兴趣的朋友跟着小编一起学习吧
    2016-08-08
  • 商城常用滚动的焦点图效果代码简单实用

    商城常用滚动的焦点图效果代码简单实用

    此效果在网上使用的频率比较多一点但大多是插件，要么JS写的太过于复杂童鞋们看起来有一定的难度，这个相对来说比较简单一点,感兴趣的可以参考下哈
    2013-03-03

最新评论