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

最新推荐文章于 2021-01-05 21:27:16 发布

飞扬_柳絮

最新推荐文章于 2021-01-05 21:27:16 发布

阅读量886

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/tjcjava/article/details/77009047

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

代码示例：

<!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)
  }