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个项目，那么无论我点击哪个div，匿名函数中的i总是给我“4”。

为什么会这样？

Answer 1

这是classic closure variable in a loop issue

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) {....}
}

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

2 个答案: