jQuery change event en <select> no activada en IE

Question

Tengo una página con un número variable de elementos <select> (lo que explica por qué estoy usando la delegación de eventos aquí). Cuando el usuario cambia la opción seleccionada, quiero ocultar/mostrar diferentes áreas de contenido en la página. Aquí está el código que tengo:

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

Esto funciona en Firefox y Safari, pero en IE el evento de cambio no se dispara. Alguien sabe por qué? ¡Gracias!

Answer 1

El evento change no burbujea en el IE (Ver here y here). No puede usar la delegación de eventos en conjunto con ella.

De hecho, es a causa de este fallo de IE que jQuery live tuvo que excluir oficialmente change de los list of supported events (FYI los estados de especificaciones DOM change should bubble) . ^[1]

Con respecto a su pregunta, puede enlazar directamente a cada seleccione:

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

Si realmente quiere delegación de eventos que podría encontrar algún éxito tratando lo this person did y se unen a click sólo en IE, que hace burbuja:

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

Pero esta detección de navegador se siente realmente mal. Realmente trataría de trabajar con el ejemplo anterior (vinculando directamente a los menús desplegables). A menos que tenga cientos de cajas <select>, la delegación de eventos no le comprará mucho aquí de todos modos.

---

_{[1] Nota: jQuery> = 1.4 ahora simula un evento de propagación change en IE a través de live()/on().}

Answer 2

Estoy tratando de entender por qué necesita verificar dos veces el nombre de la selección después de recibir un evento.

¿Tiene usted, por casualidad, varios elementos con la misma identificación?

¿De verdad quiso decir "#container select" en lugar de "#container"?

Answer 3

idea que podría ayudar:

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

Si está utilizando AJAX, intente live() función:

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

Answer 4

Si recuerdo correctamente, tendrá que llamar a la falta de definición() para tener jQuery invocar el cambio() en máquinas de IE. Pruebe algo como:

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