Attached Behavior being lost.

It;s there first click, gone after clicking away.

[rocknbil]

Page object:

<a href="#" id="imgLink1"><img id="img1" src="images/1.gif" border="0" alt="blah"></a>

Duplicated 6 times, so there is imgLink2, img2, etc., up to 6.

Then we have

window.onload = function() {  
 init_labels(); 
} 
function init_labels() { 
 for (i=1;i<7;i++) { 
 img = 'imgLink' + i; 
 if (document.getElementById(img)) { 
 if (i > 3) { document.getElementById(img).onclick=function() {  
 selectImage(parseInt(this.id.substr(this.id.length-1)));  
 show456();  
 return false;  
 };  
} 
 else { document.getElementById(img).onclick=function() {  
 selectImage(parseInt(this.id.substr(this.id.length-1)));  
 show123();  
 return false;  
 };  
 } 
 } 
 } 
} 

It's built on existing code and there are complexities (like the method above to get "number" out of imgLink[number), which is why there's two functions and the return false.

The problem: Works perfectly going through and clicking the link objects the first time.. The second time through . . . nada, navigates to # as if it lost it's attached behavior. Don't have to go through all of them. Click one, then a second, return to one already clicked, it fails.

selectImage sets various styles and innerHTML on stuff below the image, the show() thingies show hide an unrelated pair of divs. The code is a bit long bu it's not very advanced.

What would cause an instance of an id'ed object to lose it's attached behavior?

Edit:

I've tracked it to this, at least, I think.

In this chunk the user is taking the original innerHTML of the overall block,

<div id="div1">
<p><a href="#" id="imgLink1"><img id="img1" src="images/1.gif" border="0" alt="blah"></a> </p>
</div>

appending the block with a new paragraph,

<div id="div1">
<p><a href="#" id="imgLink1"><img id="img1" src="images/1.gif" border="0" alt="blah"></a> </p>
<p>Selected image 1 OK</p>
</div>

Then rewriting the innerHTML of "div1" with the contents.

I'm presuming, but don't know, that in rewriting over the entire innerHTML block, it's killing the behavior of the original imgLink1 object.

Would that be (sorta) correct?

Edit 2:

Yeah, solved, guess that was it, have to run

init_labels();

at the end there and it's all good. :-) Guess anyone who has some disappearing behaviors might benefit . . .

[daveVk]

Strictly you should
- remove event handlers
- replace code
- replace event handlers

If you skip the first step, browsers tend to leak memory, this is particularly a problem for ajax type applications that update a single page a lot.

[rocknbil]

Awesome point, but since it's not using addEventListener and just assigning the function what would one do? At a guess, set onclick=function() {}; ?

[daveVk]

onclick=null;

Not sure what browsers this is still an issue with, a couple of years ago had site where in IE lost speed each update, and leak could be seen in task manager.