Question

我在脚本中创建了一些div，并在循环中使用某个类名。我想在每个div中添加onclick事件，并通过单击它们获取innerHTML。但每次点击我只得到最后一个div的innerHTML。这是我的代码：

for(var i=0;i<10;i++)
{
  var itemRow = document.createElement("div");
  itemRow.innerHTML = i;
  itemRow.onclick = function(){
    return function(){
      console.log(itemRow.innerHTML); //which now returns only the last div innerHTML
                      
    }();
  }
}

非常感谢

Answer 1

这是for循环和事件回调的常见问题。您正在尝试访问函数内部的变量，该变量将由for循环更新。这就是为什么你总是看到最后一个div innerHTML的原因。将代码更改为

for(var i=0;i<10;i++)
{
  var itemRow = document.createElement("div");
  itemRow.innerHTML = i;
  itemRow.onclick = getClickHandler(itemRow);

}

function getClickHandler(itemRow){
    return function(){
      console.log(itemRow.innerHTML);
    }
}

Answer 2

您需要将循环的内容包装在IIFE函数中以创建词法范围，以便事件处理程序可以记住数据。

＆＃13;

for(var i=0;i<10;i++)
{
 (function(i) {
     var itemRow = document.createElement("div");
     itemRow.innerHTML = i;
     itemRow.onclick = function(){
        alert(itemRow.innerHTML); 
     }
     document.body.appendChild(itemRow);
  })(i);
}

＆＃13;

另外很简单，您可以使用this.innerHTML来获取值。在点击处理程序中，您在循环期间无法访问分配给它的itemRow。它总是指向最后一个元素。为了避免它，只需在那里使用this.innerHTML。也不需要在事件处理程序中返回自执行函数。

编辑：添加演示

＆＃13;

for(var i=0;i<10;i++)
{
  var itemRow = document.createElement("div");
  itemRow.innerHTML = i;
  itemRow.onclick = function(){
      alert(this.innerHTML); 
    }
  document.body.appendChild(itemRow);
}

＆＃13;

Answer 3

for(var i=0;i<10;i++)
{
  var itemRow = document.createElement("div");
  itemRow.innerHTML = i;
  itemRow.onclick = function(){
      console.log(this.innerHTML);
  }
  document.getElementById('main').appendChild( itemRow );
}

检查下面的小提琴链接：

http://jsfiddle.net/9q1pLueq/

在动态创建的标签上添加事件

3 个答案: