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

Question

我有创建动态元素的 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/

Answer 1

这是因为每次单击按钮时都会调用 btnID 值，它是 loop.Try 这段代码中的最后一个 ID

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

Answer 2

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

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

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

First One 是你试图在按钮中放置文本，它应该是 innerHTML 而不是 innerTest。

第二个是下面代码片段的问题，您可以使用 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>

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

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

Javascript pass dynamic element id to event handler

javascript

dom

event-handling