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>

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>

Answer 2

cloneNode复制节点的所有属性和值，但不复制它们使用addEventListener()添加的事件侦听器。 所以你需要再次添加这些事件监听器。

您的document.querySelectorAll()仅在您第一次加载页面时运行，因此一个简单的document.querySelector()应该可以工作，在这种情况下您甚至不需要forEach()方法。

如果我理解正确，你想克隆你点击的按钮所在的元素。如果button是li的子元素，那么你可以克隆node.parentNode 。 克隆后，您可以向其添加事件侦听器功能。

 function cloneParent() { let clone = this.parentNode.cloneNode(true); clone.querySelector('.btnMe').addEventListener('click', cloneParent); document.querySelector('#lists').appendChild(clone); } document.querySelector('.btnMe').addEventListener('click', cloneParent);

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

如@epascarello 所述，仅添加一个事件侦听器并使用事件委托应该是首选方式。