javascript - Onclick 按钮仅在第一个列表中有效

Question

我想复制列表项及其所有子元素，这是我的示例代码。仅在第一个列表中，单击时有效，重复列表的按钮无效

document.querySelectorAll(".btnMe").forEach(el => {
  el.addEventListener('click', () => {
    var myDiv = document.querySelector(".list");
    var divClone = myDiv.cloneNode(true);
    document.querySelector('#lists').appendChild(divClone);
  })
})

<ul id="lists">
  <li class="list">
    <p>Test</p>
    <button class="btnMe">Click Me</button>
  </li>
</ul>

标签： javascriptonclickduplicates

Answer 1

使用事件委托代替处理绑定事件。

var wrapper = document.querySelector("#lists")
wrapper.addEventListener('click', (evt) => {
  var btnClicked = evt.target.closest("button.btnMe");
  if (btnClicked) {
    var myDiv = document.querySelector(".list");
    var divClone = myDiv.cloneNode(true);
    wrapper.appendChild(divClone);
  }
})

<ul id="lists">
  <li class="list">
    <p>Test</p>
    <button class="btnMe">Click Me</button>
  </li>
</ul>