querySelectorAll选动态input绑定addEventListener失效解决方案

querySelectorAll返回值是NodeList类型的元素集合，不是单个DOM元素，本身不提供addEventListener方法，直接对集合调用事件绑定方法就会抛出「addEventListener不是函数」的错误。

方案1：遍历元素集合逐个绑定事件 #

等所有动态商品卡片渲染完成后，遍历拿到的所有输入框，给每个元素单独绑定change事件即可，修改后的代码如下：

const manageQuantity = async (createArticle) => {
    await createArticle
    
    // 获取所有数量输入框组成的NodeList集合
    const itemQuantityInputs = document.querySelectorAll('.itemQuantity')
    // 遍历集合，为每个输入框单独绑定事件
    itemQuantityInputs.forEach(input => {
        input.addEventListener('change', (e) => {
            // 获取当前修改后的数量值
            const newQuantity = Number(e.target.value)
            // 获取当前输入框所属的商品article元素，提前给每个article加data-product-id属性存商品唯一ID
            const productItem = e.target.closest('article')
            const productId = productItem.dataset.productId

            // 以下是LocalStorage更新逻辑示例
            const cartData = JSON.parse(localStorage.getItem('cart') || '[]')
            const targetProduct = cartData.find(item => item.id === productId)
            if (targetProduct) {
                targetProduct.quantity = newQuantity
                localStorage.setItem('cart', JSON.stringify(cartData))
            }
            // 如果有总价重算、库存校验逻辑在这里追加即可
        })
    })
}

注意：这个方案的缺陷是如果后续动态新增、删除商品卡片，需要重新执行一遍绑定逻辑，否则新生成的输入框不会带上change事件。

方案2：事件委托（更推荐，适配动态DOM场景） #

不用等商品渲染完成，直接把事件绑定在所有商品卡片的公共父容器上，利用事件冒泡机制捕获输入框的change事件，不管是初始渲染还是后续新增的商品卡片，都能正常触发事件，页面初始化时调用一次绑定函数即可：

// 页面加载完成后直接调用，不需要等待createArticle执行
const initCartEvent = () => {
    // 替换成你实际的商品列表父容器选择器，比如类名为cart-container的元素
    const cartWrapper = document.querySelector('.cart-container')
    cartWrapper.addEventListener('change', (e) => {
        // 只处理数量输入框触发的change事件
        if (e.target.matches('.itemQuantity')) {
            const newQuantity = Number(e.target.value)
            const productItem = e.target.closest('article')
            const productId = productItem.dataset.productId

            // LocalStorage更新逻辑和方案1一致
            const cartData = JSON.parse(localStorage.getItem('cart') || '[]')
            const targetProduct = cartData.find(item => item.id === productId)
            if (targetProduct) {
                targetProduct.quantity = newQuantity
                localStorage.setItem('cart', JSON.stringify(cartData))
            }
        }
    })
}

• 每个商品要存储唯一标识ID，同时绑定到对应article元素的data-product-id属性上，否则修改数量时无法定位到LocalStorage中对应的商品条目
• 数量输入框建议加上min="1"属性，限制用户输入小于1的非法数值
• 如果需要做数量和价格的联动计算，每次LocalStorage更新后同步触发总价重算逻辑即可

内容的提问来源于stack exchange，提问作者matt