Obtenir jQuery pour reconnaître .change () dans IE

J'utilise jQuery pour masquer et afficher des éléments lorsqu'un groupe de boutons radio est modifié / cliqué. Cela fonctionne bien dans les navigateurs comme Firefox, mais dans IE 6 et 7, l'action ne se produit que lorsque l'utilisateur clique ensuite ailleurs sur la page.

Pour élaborer, lorsque vous chargez la page, tout semble bien. Dans Firefox, si vous cliquez sur un bouton radio, une ligne du tableau est masquée et l'autre s'affiche immédiatement. Cependant, dans IE 6 et 7, vous cliquez sur le bouton radio et rien ne se passera tant que vous n'aurez pas cliqué quelque part sur la page. Ce n'est qu'alors qu'IE redessine la page, masquant et affichant les éléments pertinents.

Voici le jQuery que j'utilise:

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

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

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

Voici la partie du XHTML qu'elle affecte. La page entière est validée comme 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 quelqu'un a des idées pourquoi cela se produit et comment y remédier, ils seraient très appréciés!

Essayez d'utiliser à la .clickplace de .change.

Le problème avec l'utilisation de l' clickévénement au lieu dechange est que vous obtenez l'événement si la même case d'option est sélectionnée (c'est-à-dire n'a pas réellement changé). Cela peut être filtré si vous vérifiez que la nouvelle valeur est différente de l'ancienne. Je trouve cela un peu ennuyeux.

Si vous utilisez l' changeévénement, vous remarquerez peut-être qu'il reconnaîtra le changement après avoir cliqué sur n'importe quel autre élément d'IE. Si vous appelez blur()dans l' clickévénement, cela provoquera le déclenchement de l' changeévénement (uniquement si les boîtes radio ont réellement changé).

Voici comment je fais:

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

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

Vous pouvez maintenant utiliser l'événement de modification comme d'habitude.

Edit: Ajout d'un appel à focus () pour éviter les problèmes d'accessibilité (voir le commentaire de Bobby ci-dessous).

Avez-vous essayé l'événement onpropertychange d'IE? Je ne sais pas si cela fait une différence, mais cela vaut probablement la peine d'essayer. IE ne déclenche pas l'événement de modification lorsque les valeurs sont mises à jour via le code JS, mais peut-être que onpropertychange fonctionnerait dans cette instance.

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

Cela devrait également fonctionner:

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

Merci Pier. Cela a été très utile.

Dans IE, vous devez utiliser l'événement click, dans d'autres navigateurs onchange. Votre fonction pourrait devenir

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

ajouter ce plugin

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

puis

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

J'ai eu le même problème avec le texte d'entrée.

J'ai changé:

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

à

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

et tout fonctionne bien pour moi!

C'est un moyen simple de dire à IE de déclencher l'événement de modification lorsque l'utilisateur clique sur l'élément:

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

Vous pouvez étendre cela à quelque chose de plus générique pour travailler avec plus d'éléments de formulaire:

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

Je suis presque sûr que c'est un problème connu avec IE. L'ajout d'un gestionnaire pour l' onclickévénement devrait résoudre le problème:

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

Dans IE, forcez la radio et les cases à cocher à déclencher un événement «changement»:

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

à partir de jquery 1.6, ce n'est plus un problème ... je ne sais pas quand il a été corrigé ... Merci mon Dieu pour cela.

Si vous changez votre version de jQuery en 1.5.1, vous n'aurez pas à ajuster votre code. Ensuite, IE9 écoutera parfaitement:

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

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

l'astuce avec le clic fonctionne ... mais si vous voulez obtenir le bon état de la radio ou de la case à cocher, vous pouvez utiliser ceci:

(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 en utilisant le clic au lieu du changement rend le comportement ie différent. Je préfère émuler le comportement de l'événement de changement à l'aide d'une minuterie (setTimout).

quelque chose comme (avertissement - code du bloc-notes):

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

essaie ça, ça marche pour moi

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

Cela peut aider quelqu'un: au lieu de commencer par l'ID du formulaire, ciblez l'ID de sélection et soumettez le formulaire en cas de modification, comme ceci:

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

et le jQuery:

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

(Évidemment, le bouton d'envoi est facultatif, au cas où javascript serait désactivé)

Essayez ce qui suit:

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

Évitez d'utiliser .focus () ou .select () avant la fonction .change () de jquery pour IE, alors cela fonctionne bien, je l'utilise dans mon site.

Merci

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

Veuillez essayer d'utiliser chacun au lieu de modifier / cliquer , ce qui fonctionne bien même la première fois dans IE ainsi que dans d'autres navigateurs

Ne fonctionne pas une première fois

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

});

Fonctionne bien même la première fois

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

});