<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!
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
var menu = pmgroot.getElementsByTagName("ul"); var aEl = document.createElement("a"); aEl.innerHTML = "Hello"; aEl.id "123"; menu.appendChild(aEl);
U can also use jQuery's 'live' function
©2020 All rights reserved.