jQuery change event on <select> not firing in IE

user_7596 0
Viewed 69683

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?

jquery-events internet-explorer jquery javascript
10 Answers

I'm simply building upon the example set by "Crescent Flesh" for a cross-platform solution that will survive even if loading this SELECT inside #container via an AJAX call.

$('#container').bind($.browser.msie ? 'click' : 'change', function(event) {
  if ((event.type == 'click') || (event.type == 'change')) {
    if (event.target.toString().indexOf('Select') != -1) {
      var sWhich = $('#container SELECT').val();
      handleSelectionChange(sWhich);
    }
  }
});

Now you simply build the handleSelectionChange() function, renaming it whatever you want.

user_1055390
Related