The case of the missing ‘onclick’ attribute?

We had an unusual bug with the application and it was identified to be related to a particularly data entry field that was implemented using an ASP.NET radiobuttonlist with AutoPostBack=”true”.

When we investigated the bug, we can across a bizarre scenario with a mysterious case of the missing ‘onclick’ attribute on the radio button.

We had some JavaScript using jQuery to access the ‘onclick’ attribute as follows:

$('#elementId').attr('onclick');

This seemed to be the correct way to access attributes using jQuery but for some reason was returning undefined. Very unusual, considering it was working fine for ASP.NET buttons. So I thought I’d bring up the IE Developer Tools and inspect the mark-up to see what the HTML looked like and this is what I saw:

To my amazement, it really wasn’t there. I was baffled as to why this the cause. It didn’t make sense. So I thought I’d do a View Source to see what if the results was different. I got the following:

Now this confused me further, the ‘onclick’ attribute was there when using View Source. Why did IE Developer Tools show something different to View Source – I am yet to work this one out. Given that the ‘onclick’ attribute was actually there, I decided to try a different approach and use pure JavaScript rather than jQuery to access the ‘onclick’ attribute as follows:

document.getElementById('elementId').onclick;

Funnily enough, this actually worked and returned the result that I was after. Again this adds more to the confusion. With this in mind, I modified the JavaScript and gave the changes a test and did not find any issues. Seems to be the workable solution. Testing in FireFox and Chrome showed that the JavaScript was cross browser compatible so that was a positive and that it was a solution that we could progress further with.

So what happened to the “onclick” attribute and why was it missing. Took a bit more investigation to figure that one out. I basically did some trial and error with another module that we had a similar issue previously with the ASP.NET radiobuttonlist thinking they may be related and stumbled across an ASP.NET radiobuttonlist that actually worked fine with the jQuery implementation. When comparing the two ASP.NET radiobuttonlist implementations, we found that it was the ASP.NET validator that was the cause. When an ASP.NET validator is attached to the ASP.NET radiobuttonlist the ‘onclick’ attribute is not added to the live mark-up and is handled by the JavaScript generated by the ASP.NET validator.

This behaviour does not seem to affect FireFox, Chrome or IE9 and above from testing. It seems to be isolated to IE8 and below. Unfortunately we are stuck with IE8 as our primary browser at the moment, so we’ll have to resort to using pure JavaScript at the moment to get this working for the time being.

Hopefully this helps.