javascript - `onclick` 不适用于新附加的项目

Question

我的代码的重要部分:

window.onload = function(){
    function someFunction(){
        [].forEach.call(
            document.querySelectorAll('.button'),
            function(btn){
                btn.onclick = console.log("I BEEN CLICKED!!");
            }
        );  
    }

    someFunction()

};

someFunction 的 console.log 在单击加载时存在的每个 .button 时打印“I BEEN CLICKED”。

如何扩展此功能以适用于稍后仅使用纯 JavaScript(无 jQuery)添加的新附加 .button 元素？

Answer 1

该事件不会为 future 的元素添加，只会为您迄今为止查询过的元素添加。您应该使用事件委托(delegate):

document.addEventListener('click', function(e) {
  if (e.target.matches('.button')) {
    console.log('I have been clicked')
  }
})

这将适用于 future 的按钮，因为您正在捕获对整个文档的点击，但只有在通过点击与 .button 选择器匹配的目标触发事件时才会响应。

在某些旧浏览器中，matches 是前缀，但您可以grab a polyfill .