Question

从事一个有趣的副项目，遇到了一些麻烦。基本上，我有一个页面，允许用户登录到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)
      })
});
}

这几乎完全按照我想要的方式工作，并输出以下内容：问题是我似乎无法让事件监听器在按钮上工作。我尝试将这段代码添加到我的forEach中，位于最后一个

下

myButton = document.querySelector(".btn")
myButton.addEventListener("click, () => {
console.log("Test to see if button onclick works")

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

Answer 1

也许是因为单击后忘记了双引号吗？ myButton.addEventListener（“ click，（）=> { console.log（“测试按钮onclick是否有效”）应该替换为 myButton.addEventListener（“ click”，（）=> { console.log（“测试按钮onclick是否有效”）

Answer 2

可能有几件事：

按钮是否需要public class StripeWebHook : Controller { //[HttpPost] public async Task<IActionResult> Index() { } }放在最前面？
按钮或任何父元素是否有z-index？
您在追加之后致电pointer-events: none;吗？
在您尝试添加事件侦听器时DOM操作是否已完成？
您在此处使用querySelector，但您想向所有按钮或仅一个按钮添加单击侦听器吗？

如果您的问题与JS有关，则可以尝试遍历这些按钮，并将addEventListener操作包装在超时中，因此DOM追加具有要完成的缓冲区，您可以进一步调试，例如：

addEventListener

将事件侦听器添加到动态创建的按钮

2 个答案: