JQuery zum Erkennen von .change () in IE

Ich benutze jQuery zum Ausblenden und Anzeigen von Elementen, wenn eine Optionsfeldgruppe geändert / angeklickt wird. Es funktioniert gut in Browsern wie Firefox, aber in IE 6 und 7 tritt die Aktion nur auf, wenn der Benutzer dann irgendwo anders auf der Seite klickt.

Um es auszuarbeiten, wenn Sie die Seite laden, sieht alles gut aus. Wenn Sie in Firefox auf ein Optionsfeld klicken, wird eine Tabellenzeile ausgeblendet und die andere Zeile wird sofort angezeigt. In IE 6 und 7 klicken Sie jedoch auf das Optionsfeld und es passiert nichts, bis Sie irgendwo auf die Seite klicken. Erst dann zieht IE die Seite neu und versteckt die relevanten Elemente.

Hier ist die jQuery, die ich benutze:

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

Hier ist der Teil des XHTML, auf den es sich auswirkt. Die ganze Seite wird als XHTML 1.0 Strict validiert.

  View by:  

Organisation

Product

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

Wenn jemand irgendwelche Ideen hat, warum dies passiert und wie man es beheben kann, würden sie sehr geschätzt werden!

   

Versuchen Sie es mit .click anstelle von .change .

Das Problem bei der Verwendung des click -Ereignisses anstelle der change besteht darin, dass Sie das Ereignis erhalten, wenn die gleiche Radio-Box ausgewählt ist (dh sich nicht tatsächlich geändert hat). Dies kann herausgefiltert werden, wenn Sie prüfen, ob der neue Wert sich von dem alten unterscheidet. Ich finde das ein bisschen nervig.

Wenn Sie das change , stellen Sie möglicherweise fest, dass es die Änderung erkennt, nachdem Sie auf ein anderes Element in IE klicken. Wenn Sie im click Ereignis blur() aufrufen, wird das change ausgetriggers (nur wenn die Radioboxen tatsächlich geändert wurden).

Hier ist, wie ich es mache:

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

Jetzt können Sie das Änderungsereignis wie gewohnt verwenden.

Bearbeiten: Einen Aufruf von focus () hinzugefügt, um Probleme mit der Zugänglichkeit zu verhindern (siehe Bobby’s Kommentar unten).

Haben Sie das onpropertychange-Ereignis von IE probiert? Ich weiß nicht, ob es einen Unterschied macht, aber es ist wahrscheinlich einen Versuch wert. IE triggers das Änderungsereignis nicht aus, wenn Werte über JS-Code aktualisiert werden, aber in diesem Fall funktioniert möglicherweise eine Eigenschaftsänderung.

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

Dies sollte auch funktionieren:

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

Danke, Pier. Das war sehr hilfreich.

In IE müssen Sie das Click-Ereignis in anderen Browsern onchange verwenden. Deine function könnte werden

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

füge dieses Plugin hinzu

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

dann

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

Ich hatte das gleiche Problem mit dem Eingabetext.

Ich habe mich verändert:

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

zu

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

und alles funktioniert gut für mich!

Dies ist eine einfache Möglichkeit, dem IE zu sagen, dass er das Änderungsereignis auslösen soll, wenn auf das Element geklickt wird:

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

Sie könnten dies auf etwas allgemeineres erweitern, um mit mehr Formularelementen zu arbeiten:

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

Ich bin mir ziemlich sicher, dass dies ein bekanntes Problem mit IE ist. Das Hinzufügen eines onclick für das onclick Ereignis sollte das Problem beheben:

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

Im IE erzwingen Sie Radio und Kontrollkästchen, um ein “Change” -Ereignis auszulösen:

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

ab jquery 1.6 ist das kein Problem mehr .. nicht sicher, wann es behoben wurde. Gott sei Dank dafür

Wenn Sie Ihre jQuery-Version auf 1.5.1 ändern, müssen Sie Ihren Code nicht anpassen. Dann hört IE9 einfach perfekt zu:

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

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

Der Trick mit dem Klick funktioniert … aber wenn Sie den richtigen Status von Radio oder Checkbox erhalten möchten, können Sie dies verwenden:

 (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 mit Klick statt Änderung macht das ie Verhalten anders. Ich würde eher das Verhalten des Änderungsereignisses mit einem Timer (setTimout) emulieren.

etwas wie (Warnung – Notepad-Code):

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

versuche das, es funktioniert für mich

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

Dies kann jemandem helfen: Anstatt mit der ID des Formulars zu beginnen, zielen Sie auf die Auswahl-ID und senden Sie das Formular bei Änderung wie folgt:

 

und die jQuery:

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

(Natürlich ist der Submit-Button optional, falls Javascript deaktiviert ist)

Versuche Folgendes:

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

Vermeiden Sie die Verwendung von .focus () oder .select () vor .change () – function von jquery für IE, dann funktioniert es gut, ich verwende es in meiner Website.

Vielen Dank

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

Bitte versuchen Sie es mit jedem anstelle von Änderung / Klick , was funktioniert auch beim ersten Mal in IE sowie anderen Browsern

Nicht ein erstes Mal arbeiten

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

Es funktioniert schon beim ersten Mal gut

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