onChange event never firing for <select> in Internet Explorer

Question

I'm using jQuery to bind an event to the onChange handler of a as follows:

$("#accounts").change(function() { DoSomething(); });

The problem I'm having is that, while everything works fine in Firefox, the event never gets fired in IE. I'm aware of the fact that IE handles the onChange event differently than Firefox as mentioned here among other places. However, I don't think that this is the problem in this case since the event never fire, even when clicking on other elements on the screen.

Just to make sure that there wasn't a problem with my jQuery code, I tried implementing the onChange event inline like so:

<select id="accounts" onChange="DoSomething();">
    <option value="1">Account 1</option>
    <option value="2">Account 2</option>
    {omitted remaining 3000 options of list for brevity}
</select>

but the event still did not fire, even when implemented this way.

For the time being, I've changed the code to use the onClick event since the page is low traffic and the called function is fairly inexpensive. That said, I'd like to figure out what the issue is since I'm sure that I'll encounter it again in the future.

Answer 1

This is sometimes when your markup is not wrapped correctly the html hierarchy. This could be the reason probably, has happened with me and once i corrected the markup, it worked fine.

Answer 2

It might be solved by putting calling DoSomething from another thread by using it as the code to execute in setTimeout when you're using an IE browser.

if (jQuery.browser.msie) { setTimeout(DoSomething, 0); } else { DoSomething(); }

According to Microsoft this can happen because of a race condition that occurs. Please let us know if this works for you.