JQuery dazu bringen, .change () im IE zu erkennen

Ich verwende jQuery, um Elemente auszublenden und anzuzeigen, wenn eine Optionsfeldgruppe geändert / angeklickt wird. Es funktioniert gut in Browsern wie Firefox, aber in IE 6 und 7 wird die Aktion nur ausgeführt, wenn der Benutzer dann auf eine andere Stelle auf der Seite klickt.

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

Hier ist die jQuery, die ich verwende:

$(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, der davon betroffen ist. Die gesamte Seite wird als XHTML 1.0 Strict validiert.

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

Wenn jemand eine Idee hat, warum dies geschieht und wie es behoben werden kann, wäre er sehr dankbar!

Versuchen Sie es mit .clickanstelle von .change.

Das Problem bei der Verwendung des clickEreignisses anstelle vonchange besteht darin, dass Sie das Ereignis erhalten, wenn dasselbe Optionsfeld ausgewählt ist (dh sich nicht tatsächlich geändert hat). Dies kann herausgefiltert werden, wenn Sie überprüfen, ob der neue Wert vom alten abweicht. Ich finde das etwas nervig.

Wenn Sie das changeEreignis verwenden, stellen Sie möglicherweise fest, dass es die Änderung erkennt, nachdem Sie auf ein anderes Element im IE geklickt haben. Wenn Sie blur()das clickEreignis aufrufen , wird das changeEreignis ausgelöst (nur wenn sich die Optionsfelder tatsächlich geändert haben).

So mache ich das:

// 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: Es wurde ein Aufruf von focus () hinzugefügt, um Probleme mit der Barrierefreiheit zu vermeiden (siehe Bobbys Kommentar unten).

Haben Sie das Ereignis onpropertychange des IE ausprobiert? Ich weiß nicht, ob es einen Unterschied macht, aber es ist wahrscheinlich einen Versuch wert. IE löst das Änderungsereignis nicht aus, wenn Werte über JS-Code aktualisiert werden, aber möglicherweise funktioniert onpropertychange in dieser Instanz.

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

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

Im IE müssen Sie das Klickereignis verwenden, in anderen Browsern onchange. Ihre Funktion 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, den IE anzuweisen, das Änderungsereignis auszulösen, wenn auf das Element geklickt wird:

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

Sie können 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 dem Internet Explorer ist. Das Hinzufügen eines Handlers für das onclickEreignis 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();
    });     
});

Erzwingen Sie im IE Radio und Kontrollkästchen, um ein "Änderungs" -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 dies kein Problem mehr. Ich bin mir 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 des Radios oder des Kontrollkästchens erhalten möchten, können Sie Folgendes 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
})

Wenn Sie anstelle von "Klicken" klicken, ändert sich das Verhalten. Ich möchte das Verhalten von Änderungsereignissen lieber mit einem Timer (setTimout) emulieren.

so etwas wie (Warnung - Notizblockcode):

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

versuchen Sie dies, 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 ausgewählte ID ab und senden Sie das Formular bei Änderung wie folgt:

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

und die jQuery:

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

(Natürlich ist die Schaltfläche "Senden" optional, falls Javascript deaktiviert ist.)

Versuche Folgendes:

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

Vermeiden Sie die Verwendung von .focus () oder .select () vor der .change () -Funktion von jquery für IE, dann , ich verwende es auf meiner Site.

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 Ändern / Klicken , was auch beim ersten Mal im IE und in anderen Browsern einwandfrei funktioniert

Ich arbeite nicht zum ersten Mal

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

});

Funktioniert auch beim ersten Mal einwandfrei

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

});