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 相关文章推荐
picChange 图片切换特效的函数代码
May 06 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
js中call与apply的用法小结
Dec 28 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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中的超全局变量
2006/10/09 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
运动会广播稿50字
2014/01/26 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
建国大业电影观后感
2015/06/01 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python