数组迭代过程中的addEventListener问题[已解决]

Question

我正在为我的新兵训练营建立一个项目，但我被困在一个很烦人的小地方。 我有一个 api，我可以在其中查询 amazon 并显示产品，每个产品都有自己的“卡片”样式，如果用户选择他想要添加，我会将每个产品推送到用户类构造函数中的空数组将该产品添加到他的“配置文件”，在用户类中，我有一个名为“displayProducts”的函数，它基本上迭代该产品数组，创建一个 div 元素，在每次迭代时修改元素的 innerHTML 并将其显示在页面上。 这是功能：

        const productSection = document.getElementById('userProducts')
        productSection.innerHTML = ``;
        let div = document.createElement('div')
        if (user.products.length > 0) {
            user.products.forEach((product) => {
                div.innerHTML += `
        <div class="card horizontal">
            <div class="card-image">
                <img src=${product.img}>
            </div>

            <div class="card-stacked">
                <div class = "card-content">
                <span class = "card-title"> ${product.title} </span> 
                <p> ${product.rating} rating, ${product.totalReviews} reviews </p>
                <span> Price:${product.price}</span>
            </div>

            <div class="card-action">
                <button class="btn delete-${product.asin}">delete</button> 
            </div>

        </div> 
        `
                deleteButton = div.querySelector(`.delete-${product.asin}`).addEventListener('click', user.delete.bind(product))
                productSection.appendChild(div);
            }

问题是，在向每个按钮添加事件侦听器时 - 它只是将事件侦听器应用于最后一个产品，即使在每个阶段它都选择了正确的按钮，我已经使用了两个多小时，我很失落。 我如何将事件侦听器持久化到每个产品卡？

Answer 1

当您使用container.innerHTML += ，容器内的任何现有侦听器都将丢失，因为容器的内容会从新的 HTML 字符串开始重新解析。 另一种方法是使用insertAdjacentHTML ，它不会破坏现有元素：

div.insertAdjacentHTML('beforeend', `
  <div class="card horizontal">
    <div class="card-image">
        <img src=${product.img}>
  // etc

然后在循环内使用addEventListener将起作用。

但我关心的另一个问题是 HTML 字符串与products数据的连接。 除非这些数据值得信赖，否则您当前的代码可能会导致任意代码执行，这是一种安全风险。 而不是直接在模板文字内插值。 考虑之后选择元素并分配给它们的textContent （或其他属性）。 例如，而不是：

<img src=${product.img}>

追加当前<div> ，然后分配给src稍后。 而不是insertAdjacentHTML ：

const thisCard = div.appendChild(document.createElement('div'));
thisCard.className = 'card horizontal';
thisCard.innerHTML = `
    <div class="card-image">
        <img>
    </div>
    // etc
`;
thisCard.querySelector('img').src = product.img;