jQuery change event on not firing in IE Asked Oct 28 '09 at 14:13 Active Apr 24 '22 at 08:55 Viewed 7.0k times 55 0 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? javascript jquery internet-explorer jquery-events edited Apr 24 '22 at 08:55 Brian Tompsett - 汤莱恩 5,753 72 57 129 asked Oct 28 '09 at 14:13 Justin Stayton 6,031 8 37 43 1 According to MSDN, the change event doesn't bubble in IE, so unless jQuery is doing some magic, event delegation won't work: http://msdn.microsoft.com/en-us/library/ms536912(VS.85).aspx – NickFitz Oct 28 '09 at 14:38 10 Answers10 72 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(). edited May 23 '17 at 12:32 Community 1 1 answered Oct 28 '09 at 14:46 Crescent Fresh 115,249 25 154 140 This would be one of the cases you can't get away from browser testing since you can't really feature test. However, for a full solution, you'd have to also handle keyup for keyboard navigation – Ruan Mendes Oct 21 '10 at 19:50 2 @Juan: some think feature detecting a bubbling event is possible. See http://perfectionkills.com/detecting-event-support-without-browser-sniffing/#comment-44332 – Crescent Fresh Oct 22 '10 at 12:06 1 That's cool, thanks. Overview of the link that is applicable here: The post is about detecting supported events. By checking for a 'change' event on a div, you'll know whether the change event bubbles, since a div doesn't have its own change event. – Ruan Mendes Oct 22 '10 at 20:28 3 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; }); }); answered Oct 28 '09 at 14:18 Arnis Lapsa 45,880 29 115 195 2 `jQuery/live()` does not support the `change` event. See http://docs.jquery.com/Events/live#typefn – Crescent Fresh Oct 28 '09 at 14:47 2 1.4 supports change event for .live, but the event itself is still a mess in IE as far as I can tell. – ScottyDont Jan 24 '10 at 18:28 .live() is deprecated now in 1.7.7. – Volomike Mar 14 '12 at 03:16 3 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(); }); answered Oct 28 '09 at 14:18 Daniel Sloof 12,568 14 72 106 Unfortunately, this doesn't do the trick. The event still isn't fired, even when the is blurred. – Justin Stayton Oct 28 '09 at 14:27

Answer 1

using jquery 1.4.4 (and i think 1.4.3) seems to be all good now.... the change event works consistently in my limited testing.

Answer 2

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.

Answer 3

Add this lines to your page head, Sit back and relax! :)

$(document).ready(function(){$('select').bind('onChange',function(){$(this).blur()});});

Answer 4

IE requires change event to be placed inside document ready. This seems to bind the change event to the associated element. Hope it helps.

Answer 5

I'm trying to understand why you need to double check the name of the select after receiving an event to it.

Do you by any chance have multiple elements with the same id ?

Did you actually mean to say "#container select" instead of "#container" ?

Answer 6

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.

Answer 7

:D:D Wow, I was finding solution... Why think so complicated? Simply:
<select onchange="doAction">