Javascript 警报根本不显示

Question

我有这个功能，我认为只要点击我页面中的一个按钮就会触发警报，但是没有任何反应，如果我在网页上打开控制台，也没有显示错误。这是为什么？

document.addEventListener('DOMContentLoaded' , () => {
         document.querySelectorAll('.new-button').forEach (button =>  {
                  button.onclick = () => {
                         const buttonName = button.innerHTML;
                         alert(`you have selected the button!  ${buttonName}`);
                  }

         });

});

如果有帮助的话，我正在使用 JavaScript 的 ES6 版本。

Answer 1

如果动态添加元素，则必须将 eventListener 附加到静态添加的某个祖先元素。 document有效，但您可以添加更具体的元素以提高性能。这个概念叫做delegate listener.

document.addEventListener('click',function(e){
  if(e.target && e.target.matches('.new-button')){
    const buttonName = e.target.innerHTML;
    alert(`you have selected the button!  ${buttonName}`);
    
    const newButton = document.createElement('button');
    newButton.classList.add('new-button');
    newButton.innerHTML = 'click me!!';
    document.getElementById('container').append(newButton);
  }
});

<div id="container">
  <button class="new-button">click me!</button>
</div>

Javascript 警报根本不显示

Javascript alert not displaying at all

javascript

alert

ecmascript-6