JS eventListener click disappearing

Question

I created simple fidlle

var cnt = 1;
function add() {
    var root = document.getElementById('root')    
    root.innerHTML += '<br /><a id= "a_' +cnt + '" href="#">click</a>'
    var a = document.getElementById("a_"+cnt)
    a.addEventListener('click', function(event) {
        alert('click:a_'+cnt)
    })
    cnt++
}

When Add button is clicked once new link is added and after clicking on this link alert appears.

When more links are added with Add button only the last link works(others does not have click event listener according to devel tools).

Why does only the last link work and how can I make all links working?

Answer 1

Because you are reinserting the anchor tags in the html. The question is similar to Appending HTML string to the DOM.

You can use

root.insertAdjacentHTML( 'beforeend', '<br /><a id= "a_' +cnt + '" href="#">click</a>');

instead of

root.innerHTML += '<br /><a id= "a_' +cnt + '" href="#">click</a>'

Working fiddle https://jsfiddle.net/0nm4uLvd/

Just to improve answer, here is another reference why event listeners are removed when dom element is removed => If a DOM Element is removed, are its listeners also removed from memory? thanks to these guys :)

Answer 2

You're modifying the innerHTML of your root element. This will cause the complete 'root' to be destroyed en recreated, so only the new event will work.

See Manipulating innerHTML removes the event handler of a child element?.