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?

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?

• javascript

5 Answers 5

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

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/

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

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++

For the possible benefit of anyone who finds this page many years after the initial question was asked:

The culprit that destroys existing event listeners seems to be

.innerHTML +=

so use a different technique.

For example:

HTML Insertion Technique 1 (which inserts the HTML but also inadvertently seems to erase any existing event listeners on other unrelated elements, so is NOT recommended):

document.body.innerHTML += '<div id="something"</div>';

Technique 2 (which works and does not affect existing event listeners):

document.body.insertAdjacentHTML( 'beforeend','<div id="something"</div>');

...or any other way (such as with append and so on).