javascript: setting a.onclick doesn't work at first run

Question

Hi,
I use code like this to dynamically create some link-based controls:

<script type="text/javascript">
    function BuildControls (id, ...)
    {  
        var div = document.getElementById (id);  
        /* some stuff with var sp=document.createElement('span'); */
        var a = document.createElement ('a');
        a.innerHTML = on ? 'Cancel' : captions_do[i];
        a.className = class_do;
        a.style.display = on2 ? '' : 'none';
        a.id = 'iAccept'+id+'_'+i+'Control';
        div.appendChild (sp);
        div.innerHTML+='<br />';
        div.appendChild (a);
        a.onclick = function () {alert ('wtf')};
        div.innerHTML+='<br />';
    }
</script>
...
<div id="someid"></div>  
<script type="text/javascript">  
    BuildControls ('someid', ...);
</script>

So when I click on the link, it does nothing. If I call a.onclick() explicitly, it works. What is wrong?

Answer 1

Your code as posted works fine in IE7 and Firefox - there must be something in the /* ... */ that's breaking it.

Answer 2

div.innerHTML+='<br />';

That is syntactical sugar for:

div.innerHTML= div.innerHTML+'<br />';

Which makes it clearer what is happening: you just serialised the entire contents of the div to HTML, added a tiny string, and parsed the results back into HTML. Even if it worked flawlessly, that'd be really inefficient.

When you serialise an element, you lose any non-attribute-based information attached to it, including JavaScript properties, event handlers and listeners. Say goodbye to your onclick.

Never use “innerHTML+=”. It is always a mistake.

An alternative is to set innerHTML on a standalone div not attached to the document, then append its childNodes one-by-one to the element where you really want it.

But for something this simple, you should just be using the standard DOM methods:

div.appendChild(document.createElement('br'));