google chrome does not fire blur event on radio buttons?

Question

This is my first post here - hello everybody

I am currently developing a html form with the support of css and jquery. The form will be used by 'unexperienced users' so my focus lies on good usability. Therefor I am providing a hint to every input field with further instructions. To show the hints I am using the onfocus/onblur javascript event, so only one hint at a time is shown. This worked well when I only had input fields of type="text", but with input fields of type="radio" I am experiencing troubles in google chrome.

I made a quick example on jsfiddle.net so you can see what I mean. The code there is very similar to the code I use in my form, so I didn't bother to post it here. The alert pops up in every browser I tested so far except google chrome. I wonder why? Is there any known solution or workaround to it?

Answer 1

Working sample:

$('input').on({
    click: function (e) {
        this.focus();
        $('#' + this.id + 'msg').show();
    },
    blur: function (e) {
        $('#' + this.id + 'msg').hide();
    }
});

Answer 2

From quirksmode:

Safari and Chrome do not fire focus/blur events when the user uses the mouse to access checkboxes, radios or buttons. Text fields, textareas and select boxes work correctly.

There are a few suggestions to work around this here.