addEventListener gone after appending innerHTML

Question

Okay, so i have the following html added to a site using javascript/greasemonkey. (just sample)

<ul>
 <li><a id='abc'>HEllo</a></li>
 <li><a id='xyz'>Hello</a></li>
</ul>

and i've also added a click event listener for the elements. All works fine up to this point, the click event gets fired when i click the element.

But... i have another function in the script, which upon a certain condition, modifies that html, ie it appends it, so it looks like:

<ul>
 <li><a id='abc'>Hello</a></li>
 <li><a id='xyz'>Hello</a></li>
 <li><a id='123'>Hello</a></li>
</ul>

but when this is done, it breaks the listeners i added for the first two elements... nothing happens when i click them.

if i comment out the call to the function which does the appending, it all starts working again!

help please...

Dartmouth

You problem is probably in your javascript. Can you paste that here so we can see what's going on? – Assr

the function that appends new html is : <code>var menu = pmgroot.getElementsByTagName("ul")[0]; menu.innerHTML += <THE NEW HTML> (its long so i din't bother to put it here)</code> – Dartmouth

Answer 1

Any time you set the innerHTML property you are overwriting any previous HTML that was set there. This includes concatenation assignment, because

element.innerHTML += '<b>Hello</b>';

is the same as writing

element.innerHTML = element.innerHTML + '<b>Hello</b>';

This means all handlers not attached via HTML attributes will be "detached", since the elements they were attached to no longer exist, and a new set of elements has taken their place. To keep all your previous event handlers, you have to append elements without overwriting any previous HTML. The best way to do this is to use DOM creation functions such as createElement and appendChild:

var menu = pmgroot.getElementsByTagName("ul")[0];
var aEl  = document.createElement("a");
aEl.innerHTML = "Hello";
aEl.id "123";
menu.appendChild(aEl);

Cooker

yup, works like a charm :) thanks once again Andy & Jage , appreciate it ;) – Dartmouth

Answer 2

As an variant, you can add such html, which will work without addEventListener:

<ul>
 <li><a id='abc' onclick='myFunc()'>Hello</a></li>
 <li><a id='xyz' onclick='myFunc()'>Hello</a></li>

 // The following add dynamically
 <li><a id='123' onclick='myFunc()'>Hello</a></li>
</ul>

Lowspirited

Answer 3

U can also use jQuery's 'live' function

Cant