Ottenere jQuery per riconoscere .change () in IE

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

Per elaborare, quando carichi la pagina, tutto sembra a posto. In Firefox, se si fa 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 clicchi da qualche parte sulla pagina. Solo allora IE ridisegna la pagina, nascondendo e mostrando gli elementi pertinenti.

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 interessa. L’intera pagina è valida come XHTML 1.0 Strict.

  View by:  

Organisation

Product

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

Se qualcuno ha qualche idea del perché questo sta accadendo e come risolverlo, sarebbe molto apprezzato!

Prova a utilizzare .change anziché .change .

Il problema con l’utilizzo dell’evento click anziché di change è che ottieni l’evento se è stata selezionata la stessa radio box (cioè non è stata effettivamente modificata). Questo può essere filtrato se si controlla che il nuovo valore sia diverso dal vecchio. Trovo questo un po ‘fastidioso.

Se si utilizza l’evento change , è ansible notare che riconoscerà la modifica dopo aver fatto clic su qualsiasi altro elemento in IE. Se chiami blur() nell’evento click , l’evento change verrà triggersto (solo se le caselle radio hanno effettivamente cambiato).

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 usare l’evento change normalmente.

Modifica: aggiunta di una chiamata a focus () per evitare problemi di accessibilità (vedere il commento di Bobby in basso).

Hai provato l’evento onpropertychange di IE? Non so se faccia la differenza, ma probabilmente vale la pena provare. IE non triggers 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 }); 

Questo dovrebbe funzionare anche:

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

a

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

e tutto funziona bene per me!

Questo è un modo semplice per dire a IE di triggersre l’evento change quando viene cliccato l’elemento:

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

Potresti estendere questo a 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 è un problema noto con IE. L’aggiunta di un gestore per l’evento onclick 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, forzare la radio e le caselle di controllo per triggersre 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 è sicuro quando è stato risolto però .. Grazie a Dio però

Se cambi la tua versione di jQuery a 1.5.1, non dovrai modificare il tuo 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 corretto della radio o la casella di controllo 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 di modifica utilizzando un timer (setTimout).

qualcosa di simile (attenzione – codice del 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 di selezione e invia il modulo su change, in questo modo:

 

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 bene, sto usando il 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; }); } 

Si prega di provare con l’uso di ciascuno invece di modifica / clic , che sta funzionando bene anche la prima volta in IE così come altri browser

Non funziona una prima volta

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

Funzionante bene anche la prima volta

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