js循环绑定事件解决方案

转载 2015年11月20日 10:40:01
相信大家都遇到过类似的问题,for循环绑定完事件最后执行的时候都是最后一个事件相同,比如这段代码 
Java代码  收藏代码
  1. <body>  
  2. <ul id="list">  
  3. <li>1</li>  
  4. <li>2</li>  
  5. <li>3</li>  
  6. <li>4</li>  
  7. <li>5</li>  
  8. </ul>  
  9. <script>  
  10. var list_obj = document.getElementsByTagName('li');  
  11. for (var i = 0; i <= list_obj.length; i++) {        
  12.   list_obj[i].onclick = function() {      
  13.     alert(i);      
  14.   }  
  15. }  
  16. </script>  
  17. </body>  

点击的时候弹出的不是0 1 2 3 4,而是5。 

解决方案也很多种,比如可以新建一个function设置一个私有方法,然后每次new一个object然后再绑定到它的方法上。 
还有就是闭包,写法相对简单: 
Java代码  收藏代码
  1. <body>  
  2. <ul id="list">  
  3. <li>1</li>  
  4. <li>2</li>  
  5. <li>3</li>  
  6. <li>4</li>  
  7. <li>5</li>  
  8. </ul>  
  9. <script>  
  10. var list_obj = document.getElementsByTagName('li');  
  11. for (var i = 0; i <= list_obj.length; i++) {      
  12.   (function(){      
  13.     var p = i     
  14.     list_obj[i].onclick = function() {      
  15.       alert(p);      
  16.     }  
  17.   })();  
  18. }  
  19. </script>  
  20. </body>  

就是每个循环加上闭包,然后设置一个临时变量,问题解决。 

JS 循环绑定多个元素的点击事件时出现的闭包问题与解决方案

昨天在循环绑定多个a标签的点击事件时出现了不少问题,首先是 js 的典型闭包问题,这个还好以前也遇到过,于是很快解决了,但是在为多个a标签绑定点击事件成功之后,本来以为就大功告成了,结果居然是在页面加...
  • Inite
  • Inite
  • 2017年11月27日 21:32
  • 47

【解决方案】闭包函数在for循环中的使用案例——for循环绑定监听事件索引值总是最后一个

请看以下两段代码,思考一下运行的结果是否一致呢? 代码一: for (var i = 0; i < as.length; i++) { (function () { var j =...

【JQuery】一个DOM元素,多次绑定同一事件的解决方案

Query的bind的函数在实际应用中用的不是特别多,只是他可以绑定一个事件,但不会即时触发,也可以通过unbind来解除绑定。在没有看到这篇文章之前,我一直不知道原来bind也可以有命名空间。事实上...

jquery动态添加元素无法触发绑定的事件的解决方案。

最近遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件。后来在网上查阅了一些资料,发现原来要这样处理:  先上我出错的代码:    ...

js图片预加载---for与onload事件,图片数据模型到界面的单项绑定,使用interval模拟循环操作

JS中for循环出现的问题:如何给li元素绑定事件,点击每个li元素弹出对应的索引?

刚开始遇到一个问题就是我在HTML中写了四个< li >标签,想给每个li 绑定一个点击事件,通过点击每个li ,弹出它对应的索引,刚开始是这么做的: 无标题文档 window.onload=fu...
  • clh386
  • clh386
  • 2017年11月17日 13:01
  • 94

JS操作数组循环删除指定元素,splice(i,1)出错解决方案

test,test,test,这里是摘要!
  • sRhee
  • sRhee
  • 2017年04月27日 16:38
  • 269

javascript循环绑定事件,只返回最后一个实例,解决办法

例子: 闭包演示 div { background: gray; margin:5px; } function init() { var list = docum...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js循环绑定事件解决方案
举报原因:
原因补充:

(最多只允许输入30个字)