Elements lose javascript functionality after cloning

Question

The following is the code. What I have done is made an item (the first one) and when i hover on its button, its background color changes to red and so on.

What I did next is cloned the element and appended it to a new div. The html (elements having same classes) is the same but the mouseover event doesn't work anymore.

My question is that why it did not work and how can I fix it? Also I tried to do the same by copying inner HTML to the new element but it is the same everytime.

const colorDiv = document.querySelector(".color-div");
const button = document.querySelector("button");
const mainContainer = document.querySelector(".main-container");

button.addEventListener("mouseover", function() {
  colorDiv.style.backgroundColor = "red";
});

button.addEventListener("mouseout", function() {
  colorDiv.style.backgroundColor = "seagreen";
});

const newItem = mainContainer.cloneNode(true);
document.querySelector(".new-container").appendChild(newItem);

.color-div {
  height: 300px;
  width: 300px;
  background-color: seagreen;
  margin: 10px;
  padding: 10px;
  transition: all .3s;
}

<!-- I will copy the div with main container class -->
<div class="main-container">
  <div class="color-div">Hello</div>
  <button>Change</button>
</div>

<!-- and append copied item to the following item -->
<div class="new-container"></div>

Yes, that's the expected behavior, events are not cloned. You've to attach the events to the cloned element or utilize event delegation. See https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode and https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation — Teemu, Aug 16 '21 at 07:14
sYou have to create all listeners on the new items also. see [stackoverflow answer](https://stackoverflow.com/questions/15408394/how-to-copy-a-dom-node-with-event-listeners) — DecPK, Aug 16 '21 at 07:16
One more question: Is that changing the background-color just an example? Or why on earth would anybody change a color on hover by JS instead of CSS? — Floyd, Aug 16 '21 at 07:19
So how can I achieve the functionality on someone else's website I'm working on. I don't know what what event listeners are being added to the buttons? — Arun Bohra, Aug 16 '21 at 07:19
@ArunBohra, check the codes to see what event listener is added to the button? — ikhvjs, Aug 16 '21 at 07:29
Does this answer your question? [How to copy a DOM node with event listeners?](https://stackoverflow.com/questions/15408394/how-to-copy-a-dom-node-with-event-listeners) — Toastrackenigma, Aug 16 '21 at 07:50

score 0 · Answer 1 · answered Aug 16 '21 at 07:48

Events are not cloned, here's a quick fix:

const colorDiv = document.querySelector(".color-div");
const button = document.querySelector("button");
const mainContainer = document.querySelector(".main-container");

// If someone clicks on anywhere on the website THAT IS A BUTTON, then change the color.
document.addEventListener("mouseover", function(e) {
  if (e.target.matches("button")) {
    colorDiv.style.backgroundColor = "red";
  }
});

document.addEventListener("mouseout", function(e) {
  if (e.target.matches("button")) {
    colorDiv.style.backgroundColor = "seagreen";
  }
}); 

const newItem = mainContainer.cloneNode(true);
document.querySelector(".new-container").appendChild(newItem);

This should work for every clone.

Elements lose javascript functionality after cloning

1 Answers1