jQuery change event on <select> not firing in IE

Question

I've got a page with a variable number of <select> elements (which explains why I'm using event delegation here). When the user changes the selected option, I want to hide/show different content areas on the page. Here's the code I have:

$(document).ready(function() {
  $('#container').change(function(e) {
    var changed = $(e.target);

    if (changed.is('select[name="mySelectName"]')) {
      // Test the selected option and hide/show different content areas.
    }
  });
});

This works in Firefox and Safari, but in IE the change event doesn't fire. Anyone know why? Thanks!

Solution 1

If I recall correctly you will need to call blur() to have jQuery invoke change() on IE machines. Try something like:

$("select[name=mySelectName]").click(function() {
    $(this).blur();
});

Solution 2

Idea that might help:

$(document).ready(function() {
  $('#container select[name="mySelectName"]').change(function(e) {
    var s = $(e.target);
    if (s.val()=='1') //hide/show something;
  });
});

If you are using AJAX, try live() function:

 $(document).ready(function() {
       $('#container select[name="mySelectName"]').live('change', function(e) {
        var s = $(e.target);
        if (s.val()=='1') //hide/show something;
      });
    });

Solution 3

onchange=doAction will work in IE and Firefox, but its not supported in Chrome.

You need to use jQuery's .change event to handle this.

Comments

[Justin Stayton]

Unfortunately, this doesn't do the trick. The event still isn't fired, even when the <select> is blurred.

[Crescent Fresh]

jQuery/live() does not support the change event. See docs.jquery.com/Events/live#typefn

[ScottyDont]

1.4 supports change event for .live, but the event itself is still a mess in IE as far as I can tell.

[Adam]

I don't think blur automatically fires change. however, blur is propagated properly, so a solution might be a delegated blur event which fires the change event (you could even save the old value as data if you want to check if it's changed). This is a hack. Unfortunately the proper solution requires MS to fix old IE versions

[Volomike]

.live() is deprecated now in 1.7.7.

[Cheran Shunmugavel]

Besides the fact that the question is specifically about jQuery's "change" event, the asker is using event delegation.

[Jaroslav Štreit]

Sorry, about little theme miss, but maybe it will help to someone who will be finding solution, none of this^ ideas doesn´t worked for me in IE 8 :(