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

Check in the console your variable cnt. You did not post the whole context where the function add is called, but I have a strong guess that this variable stays always 1.

And write a semicolon after your cnt++

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?.

Answer 3

You can set a class to your links: class="some-class". Then you can use jquery to listen to click event on elements of this class.

$(document).on('click', '.some-class', function(event) {
    alert('click:'+$(this).attr('id'));
});

Runnable example https://jsfiddle.net/2d99hq1h/1/

Answer 4

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 :)