jQuery ändern() auf <select> und firefox

Question

Ich habe einen Drop-Down, die einen Ajax-Aufruf auslöst, wenn seine geändert:

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

Mein Problem ist, in Firefox, die nach oben/unten Pfeiltasten, um durch die Drop-Down-Verwendung Optionen, löst das Ereignis js onChange() nicht aus. Es ist ok in IE.

Wie kann ich Firefox die Hoch-/Runter-Cursor als onChange sehen lassen? Kann ich entweder eine/oder auf die Veranstaltung, um entweder eine onChange oder ein Tastendruck auslösen das gleiche machen?

Danke.

Answer 1

Sie nutzen tatsächlich einen Fehler in IE. Firefox unterstützt onChange korrekt, da es nicht ausgelöst werden soll, bis der Browser den Fokus des Auswahlfelds verliert. (I answered a question gestern über dieses Problem, in der Tat.) Es ist tatsächlich ein bisschen gefährlich, onChange mit einem Select zu verwenden, vor allem, weil es keine Möglichkeit für die Tastatur nur Benutzer gibt, einige Optionen zu überspringen. (Hinzu kommt, dass das Mausrad scheint durch mehrere Antworten zu drehen, aber es löst tatsächlich onChange für jeden Eintrag auf IE vorbei.)

Wenn Sie wirklich das Ereignis wollen abzufeuern, wenn jemand drückt nach oben oder Nach unten würde ich in die onKeyPress oder onKeyDown Ereignisse eingreifen, die ausgelöst werden sollen, wenn die "up" oder "down" Taste gedrückt wird.

Answer 2

Vielleicht anstelle des Ereignisses change() das Ereignis blur() verwenden und prüfen, ob sich der Wert geändert hat?

FYI, ich habe dies nicht getestet, nur eine Idee, die ich hatte. und ich bin mir nicht sicher, ob das der gewünschte Effekt ist, weil es bei einem Verlust des Fokus ausgelöst würde, aber ich schlage es vor, um den Effekt über verschiedene Browser konsistent zu halten.

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

Ich habe gerade einige seltsame Verhalten in Firefox erlebt, die es dem Benutzer ermöglicht die Auswahl Dropdown zu öffnen, navigieren Sie mit den Pfeilen und dann statt der Tabulatortaste oder einen Klick auf einer Seite dem Benutzer ein anderes Element klicken können, denen Ergebnis in Ändern des Auswahlwerts ohne Abfeuern change Ereignis.

Um dies zu umgehen, können Sie die 10 auslösen, wenn die keyup (bitte schlagen Sie auch andere Ereignisse?) Ereignis ausgelöst wird und die Auswahl einen anderen Wert als die vorherige hat.

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

können Sie .live() Funktion verwenden, wenn Sie dinamically Auswahlelemente entlang der Laufzeit der Web-Seite erstellt haben werden. Funktion als mehrere Ereignisse

Answer 4

Ich habe es mit Jquery funktioniert focusout

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

Answer 5

bessere Option .on() verwenden zu binden

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