IE8 / .change() jQuery event not firing

This one catches me out time after time and I always forget how to get around it – so I am writing it down this time. Developing software to run well on multiple browsers is actually not that difficult until, that is, good old IE is thrown into the mix! ;-)

The problem is that in Internet Explorer, the .change() event on radio buttons doesn’t get fired properly, or at least it doesn’t behave the same was as it does in the other browsers – it’s a real pain!

There is however a relatively easy way to get around the problem, that is to handle the radio’s .click() event, and then, just .blur() and .focus() the radio control – this will cause the change() event to be fired:

$(document).ready(function() {
  $('#my-radio-container input:radio').click(function () {
        // Cause the change() event
        // to be fired in IE8 et. al.
        this.blur();
        this.focus();
   });
  $('#my-radio-container input:radio').change(function() {
    // Handle .change() event as normal....
  });
});

Remember to replace #my-radio-container with an appropriate selector for your HTML.

I am not sure why it works exactly….. but it works well for me!