événement jQuery changer sur <select> ne pas tirer dans IE

Question

J'ai une page avec un nombre variable d'éléments <select> (ce qui explique pourquoi j'utilise la délégation d'événements ici). Lorsque l'utilisateur modifie l'option sélectionnée, je souhaite masquer / afficher différentes zones de contenu sur la page. Voici le code que j'ai:

 $(document).ready(function() {
  $('#container').change(function(e) {
    var changed = $(e.target);

    if (changed.is('select[name="mySelectName"]')) {
      // Test the selected option and hide/show different content areas.
    }
  });
});
 

Cela fonctionne dans Firefox et Safari, mais dans IE, l'événement de changement ne se déclenche pas. Quelqu'un sait pourquoi? Merci!

Answer 1

L' change événement n'a pas de bulle dans IE (Voir ici et ici). Vous ne pouvez pas utiliser l'événement de délégation en tandem avec elle.

En fait, c'est à cause de ce IE bug jQuery live a officiellement exclure change à partir de la liste des événements pris en charge (pour information, le DOM spec unis change devrait bulle).^[1]

Quant à votre question, vous pouvez lier directement à chaque sélectionnez:

$('#container select').change(/*...*/)

Si vous voulez vraiment de l'événement de la délégation que vous pourriez trouver un certain succès en essayant ce que cette personne n'avait et lier click dans IE uniquement, qui ne bulle:

$('#container').bind($.browser.msie ? 'click' : 'change', function(event) {
    /* test event.type and event.target 
     * to capture only select control changes
     */
})

Mais cette détection du navigateur se sent vraiment mal. J'aimerais vraiment essayer de travailler avec l'ancien exemple (qui lie directement à la baisse à la baisse). Sauf si vous avez des centaines de <select> boîtes, événement délégation ne serait pas vous acheter beaucoup ici de toute façon.

---

_{[1] Note: jQuery >= 1.4 simule un bouillonnement change événement dans IE via live()/on().}

Answer 2

Idée qui pourrait aider:

 $(document).ready(function() {
  $('#container select[name="mySelectName"]').change(function(e) {
    var s = $(e.target);
    if (s.val()=='1') //hide/show something;
  });
});
 

Si vous utilisez AJAX, essayez la fonction live () :

  $(document).ready(function() {
       $('#container select[name="mySelectName"]').live('change', function(e) {
        var s = $(e.target);
        if (s.val()=='1') //hide/show something;
      });
    });
 

Answer 3

Si je me souviens bien, vous devrez appeler blur () pour que jQuery invoque change () sur les ordinateurs IE. Essayez quelque chose comme:

 $("select[name=mySelectName]").click(function() {
    $(this).blur();
});
 

Answer 4

utiliser jQuery 1.4.4 (et je pense que 1.4.3) semble être tout bon maintenant .... l'événement de changement fonctionne de manière cohérente dans mes tests limités.

Answer 5

Ajoutez ces lignes à votre tête de page, asseyez-vous et détendez-vous! :)

 $(document).ready(function(){$('select').bind('onChange',function(){$(this).blur()});});