Far riconoscere a jQuery .change () in IE

Sto usando jQuery per nascondere e mostrare elementi quando un gruppo di pulsanti di opzione viene modificato / cliccato. Funziona bene in browser come Firefox, ma in IE 6 e 7, l'azione si verifica solo quando l'utente fa clic da qualche altra parte nella pagina.

Per elaborare, quando carichi la pagina, tutto sembra a posto. In Firefox, se fai clic su un pulsante di opzione, una riga della tabella viene nascosta e l'altra viene visualizzata immediatamente. Tuttavia, in IE 6 e 7, fai clic sul pulsante di opzione e non accadrà nulla finché non fai clic in qualche punto della pagina. Solo allora IE ridisegna la pagina, nascondendo e mostrando gli elementi rilevanti.

Ecco il jQuery che sto usando:

$(document).ready(function () {
  $(".hiddenOnLoad").hide();

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

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

Ecco la parte dell'XHTML che colpisce. L'intera pagina viene convalidata come 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>

Se qualcuno ha qualche idea sul perché questo accada e su come risolverlo, sarebbe molto apprezzato!

Prova a usare .clickinvece di .change.

Il problema con l'utilizzo clickdell'evento invece di changeè che si ottiene l'evento se è selezionata la stessa radio box (cioè non è stata effettivamente modificata). Questo può essere filtrato se si controlla che il nuovo valore è diverso dal vecchio. Lo trovo un po 'fastidioso.

Se si utilizza l' changeevento, è possibile notare che riconoscerà la modifica dopo aver fatto clic su qualsiasi altro elemento in IE. Se si chiama blur()l' clickevento, si verificherà un changeevento (solo se le radio box sono effettivamente cambiate).

Ecco come lo sto facendo:

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

$("#viewByOrg").change(function() {
  // Do stuff here
});

Ora puoi utilizzare l'evento change come al solito.

Modifica: aggiunta una chiamata a focus () per prevenire problemi di accessibilità (vedi il commento di Bobby di seguito).

Hai provato l'evento onpropertychange di IE? Non so se fa la differenza, ma probabilmente vale la pena provare. IE non attiva l'evento change quando i valori vengono aggiornati tramite il codice JS ma forse onpropertychange funzionerebbe in questa istanza.

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

Anche questo dovrebbe funzionare:

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

Grazie Pier. Questo è stato molto utile.

In IE è necessario utilizzare l'evento click, in altri browser onchange. La tua funzione potrebbe diventare

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

aggiungi questo plugin

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

poi

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

Ho avuto lo stesso problema con il testo di input.

Ho cambiato:

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

per

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

e tutto funziona bene per me!

Questo è un modo semplice per dire a IE di attivare l'evento change quando si fa clic sull'elemento:

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

Puoi espanderlo in qualcosa di più generico per lavorare con più elementi del modulo:

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

Sono abbastanza sicuro che questo sia un problema noto con IE. L'aggiunta di un gestore per l' onclickevento dovrebbe risolvere il 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();
    });     
});

In IE, imponi alla radio e alle caselle di controllo di attivare un evento "modifica":

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

a partire da jquery 1.6 questo non è più un problema .. non sono sicuro di quando sia stato risolto però .. Grazie a dio per questo però

Se cambi la versione di jQuery in 1.5.1, non dovrai modificare il codice. Quindi IE9 ascolterà semplicemente perfetto per:

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

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

il trucco con il clic funziona ... ma se vuoi ottenere lo stato radio o la casella di controllo corretti puoi usare questo:

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

imo usando click invece di change rende il comportamento ie diverso. Preferirei emulare il comportamento dell'evento change usando un timer (setTimout).

qualcosa come (avviso - codice blocco note):

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

prova questo, funziona per me

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

Questo può aiutare qualcuno: invece di iniziare con l'id del modulo, scegli come target l'id selezionato e invia il modulo in caso di modifica, in questo modo:

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

e il jQuery:

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

(Ovviamente, il pulsante di invio è facoltativo, nel caso in cui JavaScript sia disabilitato)

Prova quanto segue:

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

Evita di usare .focus () o .select () prima della funzione .change () di jquery per IE, quindi funziona benissimo, lo sto usando nel mio sito.

Grazie

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

Prova a utilizzare ciascuno invece di modifica / clic , che funziona bene anche la prima volta in IE e in altri browser

Non funziona la prima volta

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

});

Funziona bene anche la prima volta

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

});