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 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
vue 如何使用递归组件
2020/10/23 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python三元运算实现方法
2015/01/12 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
Python对切片命名的实现方法
2018/10/16 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
数据库面试要点基本概念
2013/10/31 面试题
幼儿园教师工作感言
2014/02/15 职场文书
干部下基层实施方案
2014/03/14 职场文书
行政经理岗位职责
2015/04/15 职场文书
专项资金申请报告
2015/05/15 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
python - timeit 时间模块
2021/04/06 Python
python基于opencv批量生成验证码的示例
2021/04/28 Python