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

Question

我有一个JS，可以创建动态元素，我想给这些元素添加onclick事件，并把调用元素的ID传给事件处理程序，这样我就可以用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.netj519rbyn1

Answer 1

所以在你上面的代码中，发生了什么，因为点击事件发生在未来for循环被执行的时间内，所以这就是为什么你会得到最后一个被执行的值为x。按钮-2 作为文本。值3不会出现，因为它在for循环的条件下被打破。

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

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

第一件事 是你想在按钮中放一个文本，它应该是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>

希望你对这个问题有清晰的认识。

Answer 2

因为每次点击按钮时，btnID值都会被调用，而btnID是循环中的最后一个id。

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