为什么当我点击事件时它有时有效而不总是有效？

Question

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

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

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

提前致谢

Answer 1

您正在使用 querySelectorAll('#app')
# 意味着你想得到一个 ID，但是 querySelectorAll select 多个 Id 和文档 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>

为什么当我点击事件时它有时有效而不总是有效？

why when I click on the event it only works sometimes and not always?

javascript

dom

contains

event-listener