将事件侦听器添加到使用 Javascript 从 API 捕获的动态生成的元素

Question

我正在开发一个从 API 获取数据并根据从 API 接收的数据创建书籍列表的应用程序。它是一个提供书名和信息的 API。我生成了动态 li 元素并在 li 中生成了一个按钮。每个按钮都有一个隐藏的输入元素，其中保留了书名。问题是我正在尝试为按钮定义一个 onclick 事件侦听器，因为按钮是动态生成的，它们没有 id。我想为按钮创建一个事件侦听器，以便一旦单击一个特定按钮，就会传递在按钮内部定义的隐藏输入元素的值。我想不出办法做到这一点。如何使其了解单击了哪个特定按钮，以便返回附加到它的输入值。 任何帮助将非常感激。 这是我的代码的一部分。

async function overViewMaker(){
  const response = await fetch(api_url_overview.concat(api_key));
  let data = await response.json();
  data = data.results.lists;
  data.forEach(book => {
      let mybook = book.books;
      mybook.forEach(eachbook => {
      var book_div = document.getElementById('book_list');
      var liTag = document.createElement("li");
      var aTag = document.createElement("buttom");
      var inpuHidden = document.createElement("input");
      inpuHidden.setAttribute("type", "hidden");
      inpuHidden.value = eachbook.title;
      aTag.appendChild(inpuHidden);
      liTag.appendChild(aTag);
      book_div.appendChild(liTag);        
      });
  });
}

Answer 1

每个按钮都已经是一个元素对象，因此您可以直接在元素上使用addEventListener。

async function overViewMaker() {
    const response = await fetch(api_url_overview.concat(api_key));
    let data = await response.json();
    data = data.results.lists;

    // moved book_div out of for loop so it doesn't need to be re-queried for every book
    var book_div = document.getElementById("book_list");

    data.forEach((book) => {
        let mybook = book.books;
        mybook.forEach((eachbook) => {
            var liTag = document.createElement("li");
            var aTag = document.createElement("button");

            var inpuHidden = document.createElement("input");
            inpuHidden.setAttribute("type", "hidden");
            inpuHidden.value = eachbook.title;
            aTag.appendChild(inpuHidden);

            aTag.addEventListener("click", (ev) => {
                // you don't need to get book title from the hidden input element since it is in the scope
                // inputHidden.value is also accessible from inside of here
                const title = eachBook.title;
                console.log(title);
            });

            liTag.appendChild(aTag);
            book_div.appendChild(liTag);
        });
    });