web-dev-qa-db-fra.com

L'événement jQuery change sur <select> ne se déclenche pas IE

J'ai une page avec un nombre variable de <select> éléments (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!

javascriptjqueryjavascript-eventsinternet-explorer
55
Justin Stayton

L'événement change ne se propage pas dans IE (Voir ici et ici ). Vous ne pouvez pas utiliser la délégation d'événement en tandem avec ça.

En fait, c'est à cause de ce IE que jQuery live a dû officiellement exclure change de la liste des événements pris en charge (Pour info la spécification DOM indique changedevrait bouillonner ).[ 1 ]

En ce qui concerne votre question, vous pouvez vous lier directement à chaque sélection:

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

Si vous voulez vraiment une délégation d'événement, vous pourriez trouver du succès en essayant quoi cette personne l'a fait et vous lier à click dans IE uniquement, qui fait 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 de navigateur se sent vraiment mal. J'essaierais vraiment de travailler avec l'exemple précédent (en se liant directement aux listes déroulantes). À moins que vous ayez des centaines de boîtes <select>, La délégation de l'événement ne vous achèterait pas beaucoup ici de toute façon.

[ 1 ] Remarque: jQuery> = 1.4 simule désormais un événement change bouillonnant dans IE via live()/on() .

71
Crescent Fresh

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.

3
user406905

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;
      });
    });
3
Arnis Lapsa

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

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

onchange=doAction Fonctionnera dans IE et Firefox, mais ce n'est pas pris en charge dans Chrome.

Vous devez utiliser l'événement .change De jQuery pour gérer cela.

1
Madhura

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

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

J'essaie de comprendre pourquoi vous devez vérifier le nom de la sélection après avoir reçu un événement.

Avez-vous par hasard plusieurs éléments avec le même identifiant?

Vouliez-vous réellement dire "#container select" au lieu de "#container"?

0
Maciek

Je m'appuie simplement sur l'exemple donné par "Crescent Flesh" pour une solution multiplateforme qui survivra même en chargeant ce SELECT dans #container via un appel AJAX.

$('#container').bind($.browser.msie ? 'click' : 'change', function(event) {
  if ((event.type == 'click') || (event.type == 'change')) {
    if (event.target.toString().indexOf('Select') != -1) {
      var sWhich = $('#container SELECT').val();
      handleSelectionChange(sWhich);
    }
  }
});

Maintenant, vous créez simplement la fonction handleSelectionChange (), en la renommant comme vous le souhaitez.

0
Volomike

IE nécessite que l'événement de modification soit placé dans le document prêt. Cela semble lier l'événement change à l'élément associé. J'espère que ça aide.

0
Pramod Kankure