eventlisteners on child of new generated element not working

Issue

I have problems with my page, it has a function that create new divs (cards like trello) and I can drag them onto a workspace from the “generator” field. These cards have some buttons on them with attached click events. The generator code appends the different children of the card correctly, but problem is that the click events don’t work on the generated cards, only if I already manualy make this divs in html. I seen some solutions, but they all involve jQuery, how do I assign the clickevents upon generation so they work?

I seen some solutions, but they all involve jQuery, how do I assign the clickevents upon generation so they work?


// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btns = document.getElementsByClassName("comment");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = function() {
    modal.style.display = "block";
  }
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}


//Generator code to make new cards

document.getElementById("newCombBtn").addEventListener("click", function() {

    var hex = document.createElement("div");
    hex.className = "hexagon";

    var like = document.createElement("button");
    like.innerHTML = "&#x2665";
    like.id = "likebtn";

    var del = document.createElement("button");
    del.innerHTML = "&#10799";
    del.id = "deletebtn";

    var inp = document.createElement("input");
    inp.className = "input";
    inp.placeholder = "Title";

    var com = document.createElement("button");
    com.innerHTML = "&#x2261";
    com.className = "comment";


    hex.appendChild(like);
    hex.appendChild(del);
    hex.appendChild(inp);
    hex.appendChild(com);
    document.getElementById("generatorField").appendChild(hex);

});


So to summarize I need something to append the on click event to show the modal when I generate new divs like above.

Any help would be great!

Solution

At the time you created the btns, model, span NodeLists the other buttons which you generate afterwards did not exist yet, that’s why there is no EventListener attached to them.

Just add the EventListeners after you append the new Element hex to the DOM.

For example after the last line:

document.getElementById("generatorField").appendChild(hex)

add another EventListener like this:

hex.addEventListener('click', function(){
  //do what needs to be done when the new element is clicked
})

Answered By – nr1chiefrocka

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published