为什么addeventlistener只适用于for循环中的一个元素？

Question

我正在使用电子，我现在正面临一个问题。我使用 fs 从我的pc文件夹中获取文件。然后将每个元素显示到html页面。此外，还有删除按钮来删除此元素。每个删除按钮的 id等于元素名称。例如，列表中有 helloworld 元素。所以它是删除按钮有id helloworld 。然后我getElementById - 获取标题并将事件监听器应用于按钮。但它只适用于最后一个元素。为什么？如果我将所有对象记录到控制台，它会全部显示它们，就像它应该的那样。但事件监听器仅适用于一个。 谢谢！

for(let projectFile of data)
{
    fs.readFile(save_path+"\\"+projectFile, function(err, data)
    {           
        if(data != null)
         {
             let presentation_Object = JSON.parse(data.toString());

             document.getElementById('allProjects').innerHTML = document.getElementById('allProjects').innerHTML + "<button class='b wh project-box-danger btn'>"+presentation_Object.title+"<a id='"+presentation_Object.title+"'"+" href='#/'><i class='far fa-trash-alt pull-right'></i></a></button>"; // Add button and delete button with id equal to button value
         }

        var projectD = JSON.parse(data.toString()); // it works well, every object is initialized

        document.getElementById(projectD.title).addEventListener('click', function(){
            console.log(projectD.title + " is deleted"); // works only for the last element
        });


     });
}

仅适用于标题对象 - 最后一个

Answer 1

绕过内容重写的另一种方法：

if(data != null) {

  let presentation_Object = JSON.parse(data);

  var div = document.createElement('div')

  div.innerHTML = "<button class='b wh project-box-danger btn'>"+presentation_Object.title+"<a id='"+presentation_Object.title+"'"+" href='#/'><i class='far fa-trash-alt pull-right'></i>TEST</a></button>"

  document.getElementById('allProjects').appendChild(div)
}

Answer 2

该评论澄清了您的问题。 在任何情况下，您可以考虑使用.closest('button')（为了兼容性，您可以使用文档中定义的polyfill），您可以将click事件处理程序移到for循环之外：

for(var i=1;i<10;i++) {
  document.getElementById('allProjects').innerHTML = document.getElementById('allProjects').innerHTML +
          "<button class='b wh project-box-danger btn'>title"+i+"<a id='title"+i+"'"+" href='#/'><i class='far fa-trash-alt pull-right'></i></a></button>";
}
document.querySelector('#allProjects').addEventListener('click', function(e){
  var p = e.target.closest('button'); // if a button ele or child...
  if (!!p && p.tagName == 'BUTTON') {
      console.log(p.textContent + " is deleted"); 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>


<div id="allProjects">

</div>