Jquery cuadro de lista evento de cambio no se dispara en el teclado de desplazamiento

Question

Tengo un cuadro de lista sencillo en un formulario HTML y el código jQuery muy básico

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

El evento de cambio dispara bien cuando el elemento actual se selecciona mediante el Mouse, pero cuando me desplazo por los elementos usando el teclado, el evento no se dispara y mi código nunca se ejecuta.

¿Hay algún motivo para este comportamiento? ¿Y cuál es la solución?

Answer 1

El evento onchange no se dispara en general, hasta que el elemento pierde el foco. También querrá usar onkeypress. Tal vez algo como:

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

Usted querrá tanto onchange y onkeypress para tener en cuenta tanto el ratón y el teclado de la interacción respectivamente.

Answer 2

A veces el cambio de comportamiento puede variar según el navegador, como una solución que podría hacer algo como esto:

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

Puede cadena de eventos lo que quiere y manualmente disparar el evento de cambio.

IE:

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

Answer 3

El comportamiento que describes, el evento de cambio de activación a través del teclado de desplazamiento en un elemento de selección, es en realidad un error de Internet Explorer. La especificación DOM Level 2 Event define el evento change como este:

El cambio evento se produce cuando un control pierde el foco de entrada y su valor se ha modificado desde la obtención de enfoque. Este evento es válido para INPUT, SELECT, y TEXTAREA. elemento.

Si realmente quieres este comportamiento, creo que deberías ver los eventos del teclado.

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

Comprobar un ejemplo here ...

Answer 4

Tuve este problema con IE en JQuery 1.4.1 - los eventos de cambio en los cuadros combinados no se activaban si el teclado se utilizaba para realizar el cambio.

Parece que se ha corregido en JQuery 1.4.2.

Answer 5

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