jQuery change event on <select> not firing in IE jQuery change event on <select> not firing in IE javascript javascript

jQuery change event on <select> not firing in IE


The change event does not bubble in IE (See here and here). You cannot use event delegation in tandem with it.

In fact, it is because of this IE bug that jQuery live had to officially exclude change from the list of supported events (FYI the DOM spec states change should bubble).[1]

With respect to your question, you can bind directly to each select:

$('#container select').change(/*...*/)

If you really want event delegation you might find some success trying what this person did and bind to click in IE only, which does bubble:

$('#container').bind($.browser.msie ? 'click' : 'change', function(event) {    /* test event.type and event.target      * to capture only select control changes     */})

But this browser detection feels really wrong. I'd really try working with the former example (binding directly to the drop downs). Unless you have hundreds of <select> boxes, event delegation wouldn't buy you much here anyway.


[1] Note: jQuery >= 1.4 now simulates a bubbling change event in IE via live()/on().


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;      });    });


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();});