event - onchange javascript ejemplo

jQuery change() en<select> y firefox

Question

Tengo un menú desplegable que activa una llamada ajax cuando se modifica:

$(''.travel-to'').change(function(){  
    $.ajax({
        type: "GET",
        url: "/inc/rates/rates-viewer.php",
        data: "shtech=y&c_name="+escape($(this).val()),
        success: function(html){
            $(".rates-viewer").html(html);
            $(".rates-viewer tr.numbers td").css({ opacity: 0 }).fadeTo("slow",1);
        }
    });
});

Mi problema es que, en Firefox, usar las teclas de cursor arriba / abajo para onChange() por las opciones desplegables, no onChange() evento js onChange() . Está bien en IE.

¿Cómo puedo hacer que Firefox vea los cursores arriba / abajo como un onChange ? ¿Puedo hacer una o cualquiera de las onChange en el evento para hacer que un onChange o una pulsación de tecla desencadenen lo mismo?

Gracias.

Answer 1

¿Quizás en lugar de usar el evento change () use el evento blur () y verifique si el valor cambió?

Para tu información, no he probado esto, solo una idea que tuve. y no estoy seguro de si este es el efecto deseado porque se activaría en una pérdida de enfoque, pero lo estoy sugiriendo para mantener el efecto consistente en diferentes navegadores.

var currentValue;

$(''.travel-to'').blur(function(){
    var val = $(this).val();
    if (currentValue != val) {
        currentValue = val;
        $.ajax({
            type: "GET",
            url: "/inc/rates/rates-viewer.php",
            data: "shtech=y&c_name="+escape(currentValue),
            success: function(html){
                $(".rates-viewer").html(html);
                $(".rates-viewer tr.numbers td").css({ opacity: 0 }).fadeTo("slow",1);
            }
        });
    }
});

Answer 2

Acabo de experimentar un comportamiento extraño en Firefox que permite al usuario abrir el menú desplegable de selección, navegar con las flechas y luego, en lugar de hacer clic en un lado o hacer clic en un lado, el usuario puede hacer clic en otro elemento para cambiar el valor de selección sin evento de change disparo.

Para evitar esto, puede activar el change cada vez que se active el keyup (¿también sugiere otros eventos?) Y la selección tiene un valor diferente al anterior.

var selectRegistry = {},
    $selects = $(''select'');

$selects.bind(''change'', function() {
    var $this = $(this);
    selectRegistry[$this.attr(''id'')] = $this.val();
});

$selects.bind(''keyup scroll select'', function() {
    var $this = $(this);
    if ($this.val()!=selectRegistry[$this.attr(''id'')])
    {
        $this.trigger(''change'');
    }
});

Puede usar la función .live() si ha creado dinámicamente elementos seleccionados a lo largo del tiempo de ejecución de la página web.

Answer 3

En realidad estás aprovechando un error en IE. Firefox admite onChange correctamente, ya que no debe activarse hasta que el navegador pierda el foco del campo de selección. (De hecho, respondí a una pregunta de ayer sobre este mismo problema). En realidad, es un poco peligroso usar onChange con un selector, especialmente porque no hay forma de que los usuarios que solo usan el teclado omitan algunas opciones. (Además de eso, la rueda del mouse parece girar por varias respuestas, pero en realidad se activa en Cambiar para cada entrada que pasa en IE).

Si realmente desea que el evento se dispare cada vez que alguien presione hacia arriba o hacia abajo, yo engancharía a los eventos onKeyPress o onKeyDown para disparar cada vez que se presione la tecla "arriba" o "abajo".

Answer 4

La mejor opción es usar .on() para enlazar la función como múltiples eventos

$("#member").on("change keyup", function(){
    -----
});

Answer 5

Lo tengo funcionando usando jquery focusout

focusout