`onclick` 不适用于新添加的项目

Question

我代码的重要部分：

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

    someFunction()

};

单击加载时存在的每个 .button 时，

someFunction 的 console.log 打印 "I BEEN CLICKED"。

我如何扩展它以适用于稍后使用普通 JavaScript（无 jQuery）添加的新添加的 .button 元素？

Answer 1

当您使用 querySelectorAll 时，您将获得带有按钮 class 的当前元素列表并向其附加事件。当您添加新元素时，它们不会自动获取事件侦听器。每当您追加或仅将相同的事件添加到追加的项目时，您都必须重新运行该函数。

Answer 2

正如@EvanMosseri 所说，无论何时添加新按钮，您都可以手动调用它。但这很蹩脚，所以这样做：

document.body.addEventListener('DOMNodeInserted',function(){
    someFunction();
}

并将所有内容放入您的 window.onload 处理程序

编辑：@elclanrs 的方式可能比这更好，但这种方式应该仍然有效，所以我将其留在这里

Answer 3

不会为未来的元素添加事件，只会为您目前查询过的元素添加事件。您应该使用事件委托：

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

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

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

`onclick` 不适用于新添加的项目

`onclick` doesn't work for newly appended items

javascript

dom

javascript-events