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:

 

 

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!

6 replies
  1. David
    David says:

    Thanks for taking the time to publish this fix Kevin, I used it successfully to fix a radio button issue I had on IE6,7,8 which needed me to press a mouse twice on a radio for it to highlight.

    As I am not a coder and was maintaining code I did not write, solution was clear and I was able to follow it through.

    Cheers

    Reply
  2. Jesus
    Jesus says:

    I’ve found that IE is listening for a different event other than ‘change’ its actually looking for the ‘propertychange’ event. try this:

    $(‘#my-radio-container input:radio’).bind(‘propertychange change’, function() {

    // Handle .change() event as normal….

    });

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *