从事一个有趣的副业项目并遇到了一些麻烦。 基本上，我有一个允许用户登录 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 个按钮，因此不确定断开连接是什么(如果看起来我能够访问它们)。
最佳答案
也许是因为您点击后忘记了双引号？ myButton.addEventListener("点击, () => { console.log("测试按钮 onclick 是否有效") 应替换为 myButton.addEventListener("点击", () => { console.log("测试按钮 onclick 是否有效")
关于javascript - 将事件监听器添加到动态创建的按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59384808/