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 中提取資訊，但是當我單擊添加請求按鈕時，它只能作業幾次。
提前致謝
uj5u.com熱心網友回復：
您正在使用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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/395276.html
標籤：javascript dom 包含 事件监听器
下一篇：限制惰性列中的專案