L’événement Jquery Listbox Change ne se déclenche pas lors du défilement au clavier

J’ai une simple Listbox sur un formulaire HTML et ce code jQuery très basique

//Toggle visibility of selected item $("#selCategory").change(function() { $(".prashQs").addClass("hide"); var cat = $("#selCategory :selected").attr("id"); cat = cat.substr(1); $("#d" + cat).removeClass("hide"); }); 

L’événement de modification se déclenche correctement lorsque l’élément en cours est sélectionné à l’aide de la souris, mais lorsque je fais défiler les éléments à l’aide du clavier, l’événement n’est pas déclenché et mon code ne s’exécute jamais.

Y a-t-il une raison à ce comportement? Et quelle est la solution de contournement?

L’événement onchange n’est généralement pas déclenché tant que l’élément n’a pas perdu le focus. Vous voudrez aussi utiliser onkeypress . Peut-être quelque chose comme:

 var changeHandler = function() { $(".prashQs").addClass("hide"); var cat = $("#selCategory :selected").attr("id"); cat = cat.substr(1); $("#d" + cat).removeClass("hide"); } $("#selCategory").change(changeHandler).keypress(changeHandler); 

Vous voudrez que les deux onchange et onkeypress compte des interactions de la souris et du clavier, respectivement.

Parfois, le comportement de changement peut varier d’un navigateur à l’autre. En guise de solution de contournement, vous pouvez procéder comme suit:

  //Toggle visibility of selected item $("#selCategory").change(function() { $(".prashQs").addClass("hide"); var cat = $("#selCategory :selected").attr("id"); cat = cat.substr(1); $("#d" + cat).removeClass("hide"); }).keypress(function() { $(this).change(); }); 

Vous pouvez enchaîner les événements de votre choix et déclencher manuellement l’événement de modification.

C’EST À DIRE:

 var changeMethod = function() { $(this).change(); }; ....keypress(changeMethod).click(changeMethod).xxx(changeMethod); 

Le comportement que vous décrivez, l’événement de changement déclenché par le défilement du clavier dans un élément sélectionné, est en fait un bogue d’Internet Explorer. La spécification d’ événement DOM niveau 2 définit l’événement change comme suit:

L’événement de modification se produit lorsqu’un contrôle perd le focus entré et que sa valeur a été modifiée depuis l’obtention du focus. Cet événement est valable pour INPUT, SELECT et TEXTAREA. élément.

Si vous voulez vraiment ce comportement, je pense que vous devriez regarder les événements de clavier.

 $("#selCategory").keypress(function (e) { var keyCode = e.keyCode || e.which; if (keyCode == 38 || keyCode == 40) { // if up or down key is pressed $(this).change(); // sortinggger the change event } }); 

Vérifiez un exemple ici …

J’ai eu ce problème avec IE sous JQuery 1.4.1 – les événements de modification sur les listes déroulantes ne se déclenchaient pas si le clavier était utilisé pour effectuer le changement.

Semble avoir été corrigé dans JQuery 1.4.2.

 $('#item').live('change keypress', function() { /* code */ });