jQuery change event on <select> not firing in IE
JavascriptJqueryInternet ExplorerJquery EventsJavascript Problem Overview
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 Solutions
Solution 1 - Javascript
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 .[1]live
had to officially exclude change
from the list of supported events (FYI the DOM spec states change
should bubble)
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()
.
Solution 2 - Javascript
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 - Javascript
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 4 - Javascript
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.
Solution 5 - Javascript
Add this lines to your page head, Sit back and relax! :)
$(document).ready(function(){$('select').bind('onChange',function(){$(this).blur()});});
Solution 6 - Javascript
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.
Solution 7 - Javascript
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
Solution 8 - Javascript
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.
Solution 9 - Javascript
IE requires change event to be placed inside document ready. This seems to bind the change event to the associated element. Hope it helps.
Solution 10 - Javascript
:D:D Wow, I was finding solution... Why think so complicated?
Simply:
<select onchange="doAction">