javascript - 使用 jquery click 事件创建动态元素总是返回 for 循环中的最后一个索引

Question

我有这样的事情：

var a = {
     generateDynamicStuff: function(data) {
           for(var i=0;i<data.length;i++) {
              var dyn_div = document.createElement('div');
              dyn_div.className = "dyn_div_"+data[i].name;
              dyn_div.textContent = data[i].name;
              document.getElementByClassName("dyn_list")[0].appendChild(dyn_div);

              $(document).on("click", ".dyn_div_"+data[i].name, function() { alert(i); a.otherFunction(i);});
           }
     },

     otherFunction: function(some_index) {....}
}

这个想法是，我得到了一个名称列表，我将使用这些名称生成可点击的 div 元素。单击其中一个 div 时，其索引将传递给 otherFunction()。

问题是，function() { alert(i); a.otherFunction(i);}总是给出最后一个索引。也就是说，如果我有 5 个项目，那么i在匿名函数中总是给我“4”，无论我点击哪个 div。

为什么是这样？

Answer 1

它是循环问题中的经典闭包变量

var a = {
    generateDynamicStuff: function (data) {
        var $ct = $('.dyn_list');
        $.each(data, function (i, data) {
            $('<div />', {
                'class': "dyn_div_" + data.name,
                text: data.name
            }).appendTo($ct).on('click', function () {
                alert(i);
                a.otherFunction(i);
            })
        })
    },

    otherFunction: function (some_index) {....
    }
}

Answer 2

这是这里的范围问题点击事件只是绑定函数不在绑定时间执行它在实际事件发生时执行它需要最后一个值'i'所以你可以试试这个

var a = {
 generateDynamicStuff: function(data) {
       for(var i=0;i<data.length;i++) {
          var dyn_div = document.createElement('div');
          dyn_div.className = "dyn_div_"+data[i].name;
          dyn_div.textContent = data[i].name;
          dyn_div.setAttribute("index", i);
          document.getElementByClassName("dyn_list")[0].appendChild(dyn_div);

          $(document).on("click", ".dyn_div_"+data[i].name, function(e) { 
               var index = $(this).attr("index");
               alert(index); 
               a.otherFunction(index);
          });
       }
 },

 otherFunction: function(some_index) {....}
}