¿Cómo puedo mover mi elemento html sin perder el detector de eventos adjunto al botón?
El detector de eventos del botón secundario no funciona después de clonar y eliminar el elemento original
ul.appendChild(element.cloneNode(true)); element.remove();Ha dicho que desea moverlo, pero lo que está haciendo es clonarlo, guardar el clon y luego eliminar y desechar el original. En cambio, no lo clones, muévelo :
ul.appendChild(element); Eso eliminará el element de su padre actual y lo colocará en su nuevo padre ( ul ), con todos los detectores de eventos aún en su lugar.
Ejemplo en vivo:
// NOTE: This isn't how I'd write this code if I weren't demonstrating // the fact the listeners are retained when the element is moved. // But without context, it's hard to show a delegation solution. const list1 = document.getElementById("list1"); const list2 = document.getElementById("list2"); // Add a listeneer to each `li` document.querySelectorAll("li").forEach((li, index) => { li.addEventListener("click", () => { console.log(`Moving "${li.textContent}" which was originally at index ${index}`); if (li.closest("ul") === list1) { // Move from list1 to list2 list2.appendChild(li); } else { // Move from list2 to list1 list1.appendChild(li); } }); }); li { cursor: pointer; } <div>List 1:</div> <ul id="list1"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <div>List 2:</div> <ul id="list2"> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> <div>Click an item to move it to the other list.</div>Dicho esto, a menudo encuentro que la delegación de eventos es mejor cuando se trabaja con elementos que se mueven entre padres, pero realmente depende de la situación.