Question

我具有此功能，我应该认为只要单击页面中的按钮之一即可触发警报，但是什么也没有发生，并且如果我在网页上打开控制台，则不会显示任何错误。为什么呢？

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

         });

});

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

Answer 1

如果动态添加元素，则必须将eventListener附加到静态添加的某些祖先元素。 document有效，但是您可以添加更多特定的性能元素。这个概念称为委托侦听器。

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>

Answer 2

也许问题出在错误的引号中，请尝试使用'而不是` 并在调用变量时检查语法

完全不显示Javascript警报

2 个答案: