ejemplo - Obtener jQuery para reconocer.change() en IE

onchange jquery input text

Question

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.

<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é está sucediendo esto y cómo solucionarlo, ¡sería muy apreciado!

Answer 1

¿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 
}); 

Answer 2

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

Answer 3

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).

Answer 4

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

Answer 5

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'');
  });

Answer 6

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

Answer 7

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.

Answer 8

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:

<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 de enviar es opcional, en caso de que JavaScript esté desactivado)

Answer 9

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

Answer 10

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

Answer 11

Intenta usar .click lugar de .change .

Answer 12

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 () {

});

Answer 13

Pruebe lo siguiente:

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

Answer 14

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

Answer 15

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í!

Answer 16

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

Answer 17

agregar este complemento

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

entonces

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

Answer 18

el truco con el clic funciona ... pero si quiere 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
})

Answer 19

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'')});

Answer 20

//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;
       });
}