cambiamento jQuery() su <select> e Firefox

Question

ho un menu a discesa che innesca una chiamata AJAX quando la sua cambiato:

$('.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); 
     } 
    }); 
}); 

Il mio problema è, in Firefox, utilizzando i tasti cursore su/giù per scorrere il menu a discesa opzioni, non attiva l'evento js onChange(). Va bene in IE.

Come posso fare in modo che Firefox veda i cursori su/giù come onChange? Posso fare un o/o sull'evento, per fare in modo che uno onChange o un tasto premuto attivino la stessa cosa?

Grazie.

Answer 1

In realtà stai sfruttando un bug in IE. Firefox supporta onChange correttamente, in quanto non dovrebbe sparare finché il browser non perde il focus del campo di selezione. (I answered a question ieri su questo stesso problema, infatti.) In realtà è un po 'pericoloso da usare su Change con una selezione, soprattutto perché non c'è modo per gli utenti della sola tastiera di saltare alcune opzioni. (Oltre a questo, la rotellina del mouse sembra a girare da più risposte, ma in realtà spara onChange per ogni voce che passa da su IE.)

Se si vuole veramente l'evento di sparare ogni volta che qualcuno preme verso l'alto o in basso, collegherei gli eventi onKeyPress o onKeyDown per sparare ogni volta che si preme il tasto "su" o "giù".

Answer 2

Forse invece di usare l'evento change() usa l'evento blur() e controlla se il valore è cambiato?

FYI, non ho provato questo, solo un'idea che ho avuto. e non sono sicuro che questo sia l'effetto desiderato perché si innescherebbe in caso di perdita di concentrazione, ma lo suggerisco per mantenere l'effetto coerente su browser diversi.

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

Ho appena sperimentato un comportamento strano in Firefox che permette all'utente di aprire il menu a discesa selezionare, spostarsi con le frecce e poi, invece di tabulazione fuori o cliccando su un lato l'utente può cliccare un altro elemento che sarà risultato in modifica del valore di selezione senza attivare l'evento change.

Per aggirare il problema è possibile attivare change ogni volta che viene attivato l'evento keyup (si prega di suggerire altri eventi?) E la selezione ha un valore diverso rispetto al precedente.

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

È possibile utilizzare .live() funzione se avrete dinamicamente creato selezionare elementi lungo il tempo di esecuzione della pagina web.

Answer 4

ho ottenuto che funziona utilizzando jQuery focusout

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

Answer 5

soluzione migliore è utilizzare .on() per legare funzionano come più eventi

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