Question

代码的第一部分工作正常，但现在每个按钮出现，我如何为每个按钮添加功能？当前唯一按下按钮的按钮始终是最后一个，其余按钮什么都不做。

Answer 1

将其更改为

{

                var output = ""; 
                var data = JSON.parse(e.target.responseText);
                   for(var i=0; i<data.length; i++) 
                {
                    output  = data[i].title + ' ';
                    var p = document.createElement("p");
                    var div = document.getElementById("response");
                    var textNode = document.createTextNode(output);
                    p.appendChild(textNode);
                    var button = document.createElement("button");
                        button.innerHTML = "Download";
                        p.appendChild(button);

                    div.appendChild(p);
                    button.addEventListener ("click", () => 
                    {
                        alert("Test");
                    });
                }
}

Answer 2

您正在将以下代码添加到for循环

button.addEventListener ("click", () => 
 { 
    alert("Test");
 } );

将上述代码保留在for循环中。因此，对于每个按钮，将添加事件监听器。

Answer 3

另一种解决方法是将回调函数添加到元素原型的#define MBEDTLS_CMAC_C变量中：

onclick

Here是一个jsFiddle

Answer 4

您应该使用event delegation来动态添加元素

＆＃13;

// sample data
var data = [{
  title: 'one'
}, {
  title: 'two'
},{
  title: 'three'
}];

var output = "";
for (var i = 0; i < data.length; i++) {
  var output = data[i].title + " ";
  var p = document.createElement("p");
  var div = document.getElementById("response");
  var textNode = document.createTextNode(output);
  p.appendChild(textNode);
  var button = document.createElement("button");
  // added output to button text for identification
  button.innerHTML = output + " Download";
  p.appendChild(button);
  div.appendChild(p);
}

// Get the parent element, add a click listener
document.getElementById("response").addEventListener("click", function(e) {
  // e.target is the clicked element!
  // If it was a button
  if (e.target && e.target.nodeName == "BUTTON") {
    // Button found!  Output the identifying data!
    // do other work on click
    document.getElementById("display").innerHTML = e.target.innerHTML + " Clicked";
  }
});

＆＃13;

<div id="response"></div>

<div id="display">Display</div>

＆＃13;

如何为每个按钮添加功能？

4 个答案: