为什么当我单击该事件时，它有时只有效，而不总是有效？

【问题标题】：why when I click on the event it only works sometimes and not always?为什么当我单击该事件时，它有时只有效，而不总是有效？
【发布时间】：2022-01-10 05:46:49
【问题描述】：

let addToCart = document.querySelectorAll('#app')

addToCart.forEach((btn) => {
    btn.addEventListener('click',(e) => { 
    
    if (e.target.classList.contains('add-to-cart')) {
        console.log('click!')
    }
    
    })
})

我正在使用动态按钮和模板文字来制作购物车。我从 mongo DB 中提取信息，但是当我单击添加请求按钮时，它只工作了几次。

提前致谢

【问题讨论】：

标签： javascript dom contains event-listener

【解决方案1】：

您正在使用querySelectorAll('#app')
# 表示您想获得一个ID，但querySelectorAll 选择多个Ids 并记录HTML 每页只接受一个id，而不是querySelector('#app')。

let app = document.querySelector('#app')

app.addEventListener('click',(e) => {    
    if (e.target.classList.contains('add-to-cart')) {
        console.log('click!')
    }  
})

// Alernative way using querySelectorAll 
/*
const btns = document.querySelectorAll('.add-to-cart');
[...btns].forEach(btn=>btn.addEventListener('click',()=>console.log('click!')))
*/

<div id="app">
<li>
Item 1
<button class="add-to-cart">+</button>
</li>
<li>
Item 2
<button class="add-to-cart">+</button>
</li>
</div>

【讨论】：