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 相关文章推荐
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
js 复制或插入Html的实现方法小结
May 19 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
JS内部事件机制之单线程原理
Jul 02 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
vue 子组件和父组件传值的示例
Sep 11 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项目中比较通用的php自建函数的详解
2013/06/06 PHP
php抽象类用法实例分析
2015/07/07 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
浅析return false的正确使用
2013/11/04 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
python、Matlab求定积分的实现
2019/11/20 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
Numpy 多维数据数组的实现
2020/06/18 Python
Python try except finally资源回收的实现
2021/01/25 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
网上书店创业计划书
2014/01/12 职场文书
运动会邀请函范文
2014/01/31 职场文书
法定代表人资格证明书
2015/06/18 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
如何解决php-fpm启动不了问题
2021/11/17 PHP