Conseguir que jQuery reconozca .change () en IE

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

Para elaborar, cuando carga la página, todo se ve bien. En Firefox, si hace clic en un botón de opción, se oculta una fila de la tabla y la otra se muestra inmediatamente. Sin embargo, en IE 6 y 7, hace 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, ocultando 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();
  });
});

Aquí está la parte del XHTML que afecta. Toda la página se valida como XHTML 1.0 Strict.

<tr>
  <td>View by:</td>
  <td>
    <p>
      <input type="radio" name="viewBy" id="viewByOrg" value="organisation"
      checked="checked" />Organisation</p>
    <p>
      <input type="radio" name="viewBy" id="viewByProduct" value="product" />Product</p>
  </td>
</tr>
<tr class="visibleOnLoad">
  <td>Organisation:</td>
  <td>
    <select name="organisation" id="organisation" multiple="multiple" size="10">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  </td>
</tr>
<tr class="hiddenOnLoad">
  <td>Product:</td>
  <td>
    <select name="product" id="product" multiple="multiple" size="10">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  </td>
</tr>

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

Intenta usar en .clicklugar de .change.

El problema con el uso del clickevento en lugar de changees que obtienes el evento si se selecciona la misma casilla de radio (es decir, no ha cambiado realmente). Esto se puede filtrar si verifica que el nuevo valor sea diferente al anterior. Esto me parece un poco molesto.

Si usa el changeevento, puede notar que reconocerá el cambio después de hacer clic en cualquier otro elemento en IE. Si llama blur()al clickevento, hará que el changeevento se active (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 puede usar el evento change como normal.

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

¿Has probado el evento onpropertychange de IE? No sé si hace la 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 tal vez onpropertychange funcionaría en este caso.

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

Esto también debería funcionar:

$(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 debes usar el evento click, en otros navegadores onchange. Tu función podría convertirse

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

agregue este complemento

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

luego

$(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 manera simple 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 ampliar 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 onclickevento 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 ... aunque no estoy seguro de cuándo se solucionó ... Gracias a Dios por ello

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

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

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

el truco con el clic funciona ... pero si desea obtener el estado correcto de la radio o la casilla de verificación, 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
})

El uso de clic en lugar de cambio hace que el comportamiento sea diferente. Prefiero emular el comportamiento del evento de cambio usando un temporizador (setTimout).

algo como (advertencia - código del 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, me funciona

$("#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, oriente la identificación seleccionada y envíe el formulario en el cambio, de esta manera:

<form id='filterIt' action='' method='post'>
  <select id='val' name='val'>
    <option value='1'>One</option>
    <option value='2'>Two</option>
    <option value='6'>Six</option>
  </select>
  <input type="submit" value="go" />
</form>

y el jQuery:

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

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

Intenta 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 usar cada uno en lugar de cambiar / hacer clic , que funciona bien incluso la primera vez en IE, así como en otros navegadores

No funciona por primera vez

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

});

Trabajando bien incluso la primera vez

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

});