Javascript将动态元素ID传递给事件处理程序答案

【问题标题】：Javascript pass dynamic element id to event handlerJavascript将动态元素ID传递给事件处理程序
【发布时间】：2020-06-06 17:06:06
【问题描述】：

我有创建动态元素的 JS。我想将 onclick 事件添加到这些元素并将调用元素的 ID 传递给事件处理程序，以便我可以使用 JS 更改被单击元素的文本。

我通过在循环中执行类似的操作来做到这一点：

 var btnID = "button-" + x; // unique id for changing element inside of test()

 /* desired result is <button onclick="test(<runtime value of btnID>)"></button> */
 buttonElement.onclick = function () { test(btnID)  };

不幸的是，结果是每个按钮元素都将循环中最后一个元素的btnID 传递给test()。有人可以解释为什么会这样吗？

https://jsfiddle.net/j519rbyn/1/

【问题讨论】：

标签： javascript dom event-handling

【解决方案1】：

所以在上面的代码中发生的事情是因为单击事件在未来发生在 for 循环执行的时间内，所以这就是为什么你得到最后一个执行到 x 的值的原因。所以我们每次都将 button-2 作为文本。值 3 不会出现，因为它在 for 循环的条件下中断。

所以为了避免这个问题你可以使用IIFE，它被称为立即调用函数表达式。

在您的代码 sn-p 中，我根据您添加的 jsfiddle 发现了两件事。

第一个是您试图在按钮中放置一个文本，它应该是 innerHTML 而不是 innerTest。

第二个是以下 sn-p 方法的问题，您可以使用 IIFE 避免这个问题。

function bootstrap() {
  var parentContainer = document.getElementById("parent");

  for (var x = 0; x < 3; x++) {
    var buttonElement = document.createElement("button");
    buttonElement.innerHTML = "click me " + x;
    (function() {
      var j = "button-" + x
      buttonElement.onclick = function() {
        test(j)
      }
    })()

    parentContainer.appendChild(buttonElement);
  }

}

function test(elementID) {
  alert(elementID);
}

bootstrap()

<div id="parent">


</div>

希望你对此有清晰的认识。

【讨论】：

非常感谢，我怀疑是什么原因，但想不出任何替代方法！漂亮
欢迎 Turgid，如果它解决了您的问题，我们很乐意帮助您投票。因此对其他人有帮助，以供日后参考。 ?

【解决方案2】：

这是因为每次单击按钮时都会调用 btnID 值，这是循环中的最后一个 id。试试这个代码

buttonElement.onclick = function () { 
var btnID = "button-" + x; 
test(btnID)  
};

【讨论】：

@Hari，这会给你一个button-3的响应，因为x有3直到执行结束，你需要使用iife来解决这个问题，因为事件调用在for循环执行完成之前的未来