Javascript 向动态创建的按钮添加事件侦听器

在一个有趣的项目上工作，遇到了一些小麻烦。 基本上，我有一个允许用户登录Spotify的页面。然后我将他们重定向到一个页面，将他们的前10名艺术家放入一张卡片，卡片上有艺术家的姓名、图片，还有一个小按钮，可以查看即将到来的节目。我想把这个按钮链接到一个我已经在另一个脚本中写过的函数，这个函数将拉动他们指定的艺术家即将举行的音乐会

我遇到的麻烦是访问我正在创建的按钮。 以下是我正在运行的全部功能：

async function fetchArtists() {
  return await fetch('https://api.spotify.com/v1/me/top/artists', settings)
  .then((response) => {return response.json()})
    .then((data) => {
      let listOfArtists = data.items.slice(0, 10).map((item) => {
        return {
         name: item.name, 
         picture: item.images[1].url
        }
      })
      //console.log(listOfArtists)
      return listOfArtists;


    }).then((listOfArtists) => {
      listOfArtists.forEach((artist) => {
        let createCard = document.createElement('div');
        createCard.class = "card"
        createCard.style = "width: 40% height: 40%"
        createCard.innerHTML = `
        <div class="row card-row justify-content-center">
          <div class="col-md-6">
            <div class="card bg-transparent text-black text-center ">
              <img src="${artist.picture}" class="card-img rounded-circle shadow-lg p-3 mb-5 bg-black rounded" alt="...">
                <div class="card-img-overlay"></div>
                  <div class="card-footer font-weight-bold bg-transparent">${artist.name}
                  <div class="row-md-6">
                    <button class="btn btn-dark">View Upcoming Shows</button>
                  </div>
                </div>
              </div>
            </div>


        let container = document.querySelector(".artist-grid")
        container.appendChild(createCard)
      })
});
}

---

它不会在单击时向控制台输出任何内容。因此，我运行了myButton的控制台日志，它显示了10个按钮，因此，如果看起来我能够访问它们，那么不确定断开连接的原因是什么。

可能是因为您在单击后忘记了双引号？ myButton.addEventListener（“单击，（）=>{ log（“测试按钮onclick是否工作”） 应替换为 myButton.addEventListener（“单击”，（）=>{

---

log（“测试按钮onclick是否工作”）

可能有以下几种情况：

• 该按钮是否需要一个

  z-index

  将其带到前面
• 按钮或任何父元素是否有

  指针事件：无；

• 追加后是否调用

  addEventListener

• 在您尝试添加事件侦听器时，DOM操作是否已完成
• 您在此处使用的是querySelector，但是否要将单击侦听器添加到所有按钮，还是仅添加一个按钮

如果您的问题与JS相关，您可以尝试迭代这些按钮，并在超时时间内包装addEventListener操作，这样DOM追加就有缓冲区要完成，您可以进一步调试，例如：

async function fetchArtists() {
// ...

}).then((listOfArtists) => {
  // ...

  container.appendChild(createCard);

  setTimeout(() => {
    const buttons = document.querySelectorAll(`.btn`);

    buttons.forEach((button, index) => {
      console.log(`Button ${index} [query]: `, button);

      button.addEventListener(`click`, e => {
        console.log(`Button ${index} [click]: `, e);
      });
    })
  });
});

---

[输出链接]：（）添加的EventListener代码在哪里？它在

.then（）

中，在

forEach（）之后

中吗？嘿，泰勒！它就在let容器=document.querySelector（.artist网格）的最后一个上方。因此它在forEach（）中loopHey laserany。如果是这样的话，那么这个问题应该以打字错误的形式结束，而不是回答，因为这对以后的任何人都没有帮助。我想你可能是对的。这是我第一天的贡献，所以我仍然不知道StackOverdown中所有的可点击选项。我担心你没有足够的声誉来评论我提出的问题不要思考，所以在此期间，只需寻找您可以提供完整答案的问题。您在这里的答案可能没有错，只是更适合作为评论：）祝您编码愉快，欢迎光临！谢谢正文。下次我肯定会：）嘿，雷射，谢谢你的回复！不幸的是，除了谢谢你的尝试之外，这没有解决任何问题，这让我发疯了---啊！嘿，法院，非常感谢我将尝试你的解决方案。基本上，我想在所有按钮上添加一个点击侦听器。我尝试在附加之前和之后调用addEventListener，但都不起作用。它不需要Z索引，无点事件：无，据我所知，在我尝试向按钮添加事件侦听器之前，DOM操作已创建了我的按钮。我将尝试您的解决方案并报告！

async function fetchArtists() {
// ...

}).then((listOfArtists) => {
  // ...

  container.appendChild(createCard);

  setTimeout(() => {
    const buttons = document.querySelectorAll(`.btn`);

    buttons.forEach((button, index) => {
      console.log(`Button ${index} [query]: `, button);

      button.addEventListener(`click`, e => {
        console.log(`Button ${index} [click]: `, e);
      });
    })
  });
});