Obtener jQuery para reconocer .change () en IE

Estoy usando jQuery para ocultar y mostrar elementos cuando se altera / hace clic en un grupo de botones de opción. Funciona bien en navegadores como Firefox, pero en IE 6 y 7, la acción solo ocurre cuando el usuario hace clic en algún otro lugar de la página.

Para elaborar, cuando cargas la página, todo se ve bien. En Firefox, si hace clic en un botón de opción, una fila de la tabla se oculta y la otra se muestra inmediatamente. Sin embargo, en IE 6 y 7, haga clic en el botón de opción y no pasará nada hasta que haga clic en algún lugar de la página. Solo entonces IE vuelve a dibujar la página, ocultándose y mostrando los elementos relevantes.

Aquí está el jQuery que estoy usando:

$(document).ready(function () { $(".hiddenOnLoad").hide(); $("#viewByOrg").change(function () { $(".visibleOnLoad").show(); $(".hiddenOnLoad").hide(); }); $("#viewByProduct").change(function () { $(".visibleOnLoad").hide(); $(".hiddenOnLoad").show(); }); }); 

Esta es la parte del XHTML que afecta. Toda la página valida como XHTML 1.0 Strict.

  View by:  

Organisation

Product

Organisation: Option 1 Option 2 Product: Option 1 Option 2

Si alguien tiene alguna idea de por qué está sucediendo esto y cómo solucionarlo, ¡sería muy apreciado!

Intenta usar .click lugar de .change .

El problema con el uso del evento click lugar de change es que obtienes el evento si se selecciona la misma caja de radio (es decir, no ha cambiado realmente). Esto puede filtrarse si comprueba que el nuevo valor sea diferente al anterior. Encuentro esto un poco molesto.

Si utiliza el evento de change , puede observar que reconocerá el cambio después de hacer clic en cualquier otro elemento en IE. Si llama a blur() en el evento click , provocará que el evento de change se dispare (solo si las cajas de radio realmente han cambiado).

Así es como lo estoy haciendo:

 // This is the hack for IE if ($.browser.msie) { $("#viewByOrg").click(function() { this.blur(); this.focus(); }); } $("#viewByOrg").change(function() { // Do stuff here }); 

Ahora puedes usar el evento de cambio como normalmente.

Editar: se agregó una llamada a focus () para evitar problemas de accesibilidad (consulte el comentario de Bobby a continuación).

¿Has probado el evento IE onpropertychange? No sé si hace una diferencia, pero probablemente valga la pena intentarlo. IE no activa el evento de cambio cuando los valores se actualizan a través del código JS, pero quizás onpropertychange funcionaría en esta instancia.

 $("#viewByOrg").bind($.browser.msie? 'propertychange': 'change', function(e) { e.preventDefault(); // Your code here }); 

Esto debería funcionar también:

 $(document).ready(function(){ $(".hiddenOnLoad").hide(); $("#viewByOrg, #viewByProduct").bind(($.browser.msie ? "click" : "change"), function () { $(".visibleOnLoad").show(); $(".hiddenOnLoad").hide(); }); }); 

Gracias Pier. Esto fue muy útil.

En IE debe usar el evento click, en otros navegadores onchange. Su función podría convertirse en

 $(document).ready(function(){ $(".hiddenOnLoad").hide(); var evt = $.browser.msie ? "click" : "change"; $("#viewByOrg").bind(evt, function () { $(".visibleOnLoad").show(); $(".hiddenOnLoad").hide(); }); $("#viewByProduct").bind(evt, function () { $(".visibleOnLoad").hide(); $(".hiddenOnLoad").show(); }); }); 

agregar este complemento

 jQuery.fn.radioChange = function(newFn){ this.bind(jQuery.browser.msie? "click" : "change", newFn); } 

entonces

 $(function(){ $("radioBtnSelector").radioChange(function(){ //do stuff }); }); 

Tuve el mismo problema con el texto de entrada.

Cambié:

 $("#myinput").change(function() { "alert('I changed')" }); 

a

 $("#myinput").attr("onChange", "alert('I changed')"); 

y todo está funcionando bien para mí!

Esta es una forma sencilla de decirle a IE que active el evento de cambio cuando se hace clic en el elemento:

 if($.browser.msie) { $("#viewByOrg").click(function() { $(this).change(); }); } 

Puede expandir esto a algo más genérico para trabajar con más elementos de formulario:

 if($.browser.msie) { $("input, select").click(function() { $(this).change(); }); $("input, textarea").keyup(function() { $(this).change(); }); } 

Estoy bastante seguro de que este es un problema conocido con IE. Agregar un controlador para el evento onclick debería solucionar el problema:

 $(document).ready(function(){ $(".hiddenOnLoad").hide(); $("#viewByOrg").change(function () { $(".visibleOnLoad").show(); $(".hiddenOnLoad").hide(); }); $("#viewByOrg").click(function () { $(".visibleOnLoad").show(); $(".hiddenOnLoad").hide(); }); $("#viewByProduct").change(function () { $(".visibleOnLoad").hide(); $(".hiddenOnLoad").show(); }); $("#viewByProduct").click(function () { $(".visibleOnLoad").hide(); $(".hiddenOnLoad").show(); }); }); 

En IE, fuerce la radio y las casillas de verificación para activar un evento de “cambio”:

 if($.browser.msie && $.browser.version < 8) $('input[type=radio],[type=checkbox]').live('click', function(){ $(this).trigger('change'); }); 

a partir de jquery 1.6 esto ya no es un problema … no estoy seguro de cuándo fue corregido … Gracias a Dios por eso

Si cambia su versión de jQuery a 1.5.1, no tendrá que ajustar su código. Entonces IE9 escuchará simplemente perfecto para:

 $(SELECTOR).change(function() { // Shizzle }); 

http://code.jquery.com/jquery-1.5.1.min.js

el truco con el clic funciona … pero si quiere obtener el estado correcto de la radio o la checkbox puede usar esto:

 (function($) { $('input[type=checkbox], input[type=radio]').live('click', function() { var $this = $(this); setTimeout(function() { $this.trigger('changeIE'); }, 10) }); })(jQuery); $(selector).bind($.browser.msie && $.browser.version <= 8 ? 'changeIE' : 'change', function() { // do whatever you want }) 

Al usar clic en vez de cambiar, el comportamiento ie es diferente. Prefiero emular el comportamiento del evento de cambio usando un temporizador (setTimout).

algo así como (advertencia – código de Bloc de notas):

 if ($.browser.msie) { var interval = 50; var changeHack = 'change-hac'; var select = $("#viewByOrg"); select.data(changeHack) = select.val(); var checkVal=function() { var oldVal = select.data(changeHack); var newVal = select.val(); if (oldVal !== newVal) { select.data(changeHack, newVal); select.trigger('change') } setTimeout(changeHack, interval); } setTimeout(changeHack, interval); } $("#viewByOrg").change(function() { // Do stuff here }); 

prueba esto, funciona para mí

 $("#viewByOrg") .attr('onChange', $.browser.msie ? "$(this).data('onChange').apply(this)" : "") .change( function(){if(!$.browser.msie)$(this).data('onChange').apply(this)} ) .data('onChange',function(){alert('put your codes here')}); 

Esto puede ayudar a alguien: en lugar de comenzar con la identificación del formulario, seleccione la ID de selección y envíe el formulario al cambio, como este:

 

y el jQuery:

 $('#val').change(function(){ $('#filterIt').submit(); }); 

(Obviamente, el botón de enviar es opcional, en caso de que JavaScript esté desactivado)

Pruebe lo siguiente:

 .bind($.browser.msie ? 'click' : 'change', function(event) { 

Evite usar .focus () o .select () antes de la función .change () de jquery para IE, entonces funciona bien, lo estoy usando en mi sitio.

Gracias

 //global var prev_value = ""; $(document).ready(function () { if (jQuery.browser.msie && $.browser.version < 8) $('input:not(:submit):not(:button):not(:hidden), select, textarea').bind("focus", function () { prev_value = $(this).val(); }).bind("blur", function () { if($(this).val() != prev_value) has_changes = true; }); } 

Intente utilizar cada uno en lugar de cambiar / hacer clic , lo que funciona bien incluso la primera vez en IE y en otros navegadores

No está trabajando por primera vez

 $("#checkboxid").**change**(function () { }); 

Funciona bien incluso la primera vez

 $("#checkboxid").**each**(function () { });