jquery change event not firing in Internet Explore

Question

Ok I know there are other questions out there related to mine, but none I've read answer my question.

I have a select tag with some options I bound to the change event but when a user clicks into a select box and then presses up/down the change event doesn't fire in IE. It fires in Firefox, and I haven't checked Chrome.

So I guess I would like to know if there is an easy fix for this I would like to just do

$("#selector").change(function () {//Add code });

A workaround for me right now is to do this:

$("#selector").bind('change keyup',function () {//Add code });

I guess I could create a plug-in like so:

$.fn.myChange = function (fcn) { return this.bind('change keyup',fcn);}

My main thought is that jquery as a library should abstract away the ugly details of browser (in)compatibility so I would prefer if I could still use the base .change function and not have to worry about what browser I'm on.

I just wanted to know if this is the way it should be done. Is there some better way?

UPDATE:

I submitted a bug to the jquery team, to see what they think.

Here's an example that shows the problem. Open it up click into the select box and then press up/down. You will notice that IE does not trigger the change event while FF and Chrome does.

Answer 1

IE doesn't fire the onchange event until after the element in question loses focus. Use the arrow keys to select an option, then click outside the box or tab out of it.

Yes, another reason why IE sucks. I've worked around it in regular javascript by using both onchange and onclick handlers to do the same thing. Looks like that's what jQuery is doing as well. 99% of the time, users will select things by clicking. the other 1%, they'll focus out of the thing they clicked on.

Answer 2

in your example if you make this change it will work:

$("#sel").bind($.browser.msie ? 'propertychange' : 'change', function(e) {
    $("#output").append("boxval changed!" + $(this).val());
});

Note that I added the + $(this).val() so you could see it work on the actual value.

you can see it in action here: http://jsfiddle.net/At8Ht/3/

Note that this could also be done as such: (remove the browser sniff) but I have not tested in all browsers.

$("#sel").bind('propertychange change', function(e) {
    $("#output").append("boxval changed!" + $(this).val());
});

Answer 3

it should work on all browsers. I have had your issue as well several times and most of the times it is because I didn't add the event handler on ready (jQuery.ready).