时间戳

首页 > 解决方案 > 使用 innerHTML 时无法读取 null 的属性“addEventListener”

javascript - 使用 innerHTML 时无法读取 null 的属性“addEventListener”

问题描述

我正在使用 innerHTML 在其上添加一些元素和包装器

for (i = 0; i < arr.length; i++) {
    b.innerHTML += "<div class='wrapper'><div class='col-4'>" + arr[i].storeID + "</div>" + 
            "<div class='col-4'>" + arr[i].Bookid + "</div>" + 
           "<div class='col-4'>" + arr[i].StoreName + "</div>" + "</div>"
            var d=document.querySelector('.wrapper')
            d.addEventListener("click", function(e) {
                console.log('on click fired')
                /*insert the value for the autocomplete text field:*/
                inpStr=this.innerHTML
                inp.value = this.innerHTML
                /*close the list of autocompleted values,
                (or any other open lists of autocompleted values:*/
                closeAllLists();

            });
}

innerHTML正在按预期工作，但是当我单击该行时wrapper，我得到

使用 innerHTML 时无法读取 null 的属性“addEventListener”

这是因为我正在使用 innerHTML 创建一个元素吗？

标签： javascripthtml

解决方案

问题是 querySelector 只返回类 .wrapper 的第一个元素

querySelectorAll() 应该用于返回一个 .wrappers 数组，并使用 for 循环进行迭代以放置事件侦听器。

或者，您可以使用称为事件委托的技术并将事件侦听器放置在父级上，并使用 event.target 来引用单击的子级。

推荐阅读