Dom动态添加事件，不能使用循环变量的问题

来源：互联网发布：js 禁用input select 编辑：程序博客网时间：2024/05/01 23:54

代码示例：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    </head>    <body>        <ul class="examp0">            <li>内容1.1</li>            <li>内容1.2</li>            <li>内容1.3</li>        </ul>        <ul class="examp1">            <li>内容2.1</li>            <li>内容2.2</li>            <li>内容2.3</li>        </ul>    <script src="http://s.thsi.cn/js/m/js/zepto.min.js"></script>    <script>        var ul_nub = $("ul").length;        for (var i = 0; i < ul_nub; i++) {              var oli_arr = $('.examp'+i).children();            var li_nub = oli_arr.length;            for(var j=0; j<li_nub; j++){                    $(oli_arr[j]).click(function(){                        console.log(i,j);                        console.log($(oli_arr[j]).html());                    });            }        }    </script>    </body></html>

输出结果： 不管点击哪个li输出结果都是一样的
这里写图片描述

原因分析：
　在for循环里动态给li绑定点击事件【事件在for循环执行完之后才被调用<用户单击li时>】,而调用时，会对变量i、j取值，程序首先会在事件内部查找，但i、j没有定义。然后，到事件外部查找，有定义，但此时i、j的值为2、3（只有i、j的值为2、3才会停止执行for循环）。

解决方案：

 var ul_nub = $("ul").length;  for (var i = 0; i < ul_nub; i++) {      (function(i){          var oli_arr = $('.examp'+i).children();          var li_nub = oli_arr.length;          for(var j=0; j<li_nub; j++){              (function(j){                  $(oli_arr[j]).click(function(){                      console.log(i,j);                      console.log($(oli_arr[j]).html());                  });              })(j);          }      })(i)  }

阅读全文

0 0