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

Adding events on dynamically created tags

本文关键字：添加 事件 动态 创建      更新时间：2023-09-26

我正在脚本中创建一些div，并在循环中使用特定的类名。我想将onclick事件添加到每个div中，并通过单击它们来获得它们的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
                      
    }();
  }
}


非常感谢

这是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);
    }
}

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/

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

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

否则非常简单，您只需使用this.innerHTML即可获得该值。在单击处理程序中，在循环过程中您将无法访问分配给它的itemRow。它总是指向最后一个元素。为了避免它，只需在那里使用this.innerHTML。也不需要在事件处理程序中返回自执行函数。

编辑：添加演示

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

相关文章：