cambio jQuery() en <select> y Firefox

Question

tengo una lista desplegable que desencadena una llamada AJAX cuando su cambió:

$('.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, utilizando las teclas de cursor arriba/abajo para desplazarse por el menú desplegable opciones, no desencadena el evento js onChange(). Está bien en IE.

¿Cómo puedo hacer que Firefox vea los cursores arriba/abajo como onChange? ¿Puedo hacer una u otra cosa en el evento, para hacer que onChange o una tecla presionen la misma cosa?

Gracias.

Answer 1

En realidad, se aprovecha de un error en IE. Firefox admite onChange correctamente, ya que se supone que no debe activarse hasta que el navegador pierda el foco del campo de selección. (I answered a question ayer sobre este mismo problema, de hecho.) En realidad es un poco peligroso usar onChange con una selección, especialmente porque no hay forma de que los usuarios que usan el teclado salten algunas opciones. (Por encima de todo, la rueda del ratón parece a girar por múltiples respuestas, pero en realidad se dispara onChange para cada entrada que pasa por el IE.)

Si realmente desea que el evento para disparar cuando alguien presiona hacia arriba o abajo, me engancharía en los eventos onKeyPress o onKeyDown para disparar siempre que se presione la tecla "arriba" o "abajo".

Answer 2

Quizás en lugar de utilizar el evento change() utilice el evento blur() y compruebe si el valor ha cambiado?

FYI, no he probado esto, solo una idea que tuve. y no estoy seguro de si este es el efecto deseado, ya que se desencadenaría en una pérdida de foco, pero lo estoy sugiriendo para mantener el efecto constante 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 3

que acabamos de experimentar algún comportamiento extraño en Firefox que permite al usuario para abrir el menú desplegable de selección, navegar con las flechas y entonces en vez de tabulación fuera o haciendo clic en un lado, el usuario puede hacer clic en otro elemento que se resultado en cambiar el valor de selección sin activar el evento change.

Para solucionar esto, puede desencadenar el change siempre que se active el evento keyup (¿sugiere también otros eventos?) Y que el seleccionado tenga 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 utilizar .live() función de si va a haber creado dinámicamente los elementos seleccionados a lo largo del tiempo de ejecución de la página web.

Answer 4

lo tengo trabajando con jQuery focusout

http://api.jquery.com/focusout/

Answer 5

mejor opción es utilizar .on() de obligar función como múltiples eventos

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