2010-06-14 11 views
6

W jQuery, jak mogę śledzić zdarzenie onchange, jeśli wartość pola tekstowego zmienia się dynamicznie z jakiegoś innego zdarzenia. Próbowałem tego, ale jej nie działa:Zmiana jquery nie działa w przypadku zmiany wartości dynamicznej

$("#txtbox").change(function(){ 
    alert("change"); 
}); 
+0

Zobacz [$ ("# some-input") .changePolling()] (https://gist.github.com/2944926); dla opakowania, które sprawdza bieżącą wartość i wyzwala '.change()' jeśli uległo zmianie. –

Odpowiedz

0

zdarzenie change tylko pożary, gdy element traci ostrość. Zamiast tego użyj zdarzenia keyup.

11

keyup nie obejmuje wszystkich przypadków naturalne :(

dwa przypadki kiedy change i keyup nie będzie działać:

  • przeglądarka mechanizmy forma autouzupełniania
  • myszy wykonano pasta z systemowym schowku.

Przykład: formularz ma pole tekstowe przeznaczone do umieszczenia w nim adresu e-mail do niego dołączone są zdarzenia keyup.

Gdy użytkownik zaczyna pisać adres e-mail, np. Wyskakuje okno autouzupełniania Chrome lub Firefox i użytkownik klika jedną z opcji, pole zostaje wypełnione wartością, fokus pozostaje w polu tekstowym (więc nie ma zdarzenia zdarzenia zmiany) i żaden klawisz nie został naciśnięty (brak zdarzenia kluczowania). Próbowałem dołączyć kliknięcie do listy, ale powoduje dziwne zachowanie w mojej przeglądarce.

Podobnie jak w przypadku wklejania - jeśli do wklejenia używa się myszy (poprzez menu kontekstowe dostępne po kliknięciu prawym przyciskiem myszy)), ani zdarzenie kluczowania, ani zmiana nie są uruchamiane.

Ktoś ma do tego pełne rozwiązanie, tj. Jak radzić sobie z rzeczywistymi zmianami wartości sygnału wejściowego?

+1

Występuję w tym samym problemie. Przynajmniej teraz mam więcej wiedzy na temat tej sytuacji. Tnaks! – MrM

1

zgadzam się z Jakubem P.

Próbowałem przy użyciu jQuery obsłużyć zmiany do pliku typu pliku wejściowego (podgląd przesłanego obrazu), ale to nie będzie wyzwalać jak zwykły stary JavaScript onchange wydarzenie.

Zmieniłem sposób ja załączony obsługi zdarzeń w $(document).ready()

od:

$("#iconImage").bind("change", function(event) { 
    ChangeImage("iconImage", "iconImagePreview"); 
}); 

do:

var obj = document.getElementById("logoImage"); 
obj.onchange = function() { 
    ChangeImage("logoImage", "#logoImagePreview"); 
}; 

i uzyskać zachowanie się spodziewałem.

2

Szukałem rozwiązania takiego jak to, które wyzwalałoby bez konieczności opuszczania przez użytkownika elementu, ale które zadziałałoby we wszystkich przypadkach, w tym zidentyfikowanych przez Jakuba w swoim poście. To znaczy.

  • Normal wpisując
  • wklejanie elementów za pomocą myszki
  • autouzupełnianie

ja również idealnie chciał rozwiązanie jQuery jak używałem różnych selektorów jQuery itp i nie chce kłopotów z „rozpakowaniu” moje obiekty jQuery, aby dostać się do elementu DOM.

poszedłem do rozwiązania przy użyciu 3 różnych wyzwalaczy zdarzeń - patrz komentarze w próbce kodu poniżej dlaczego:

var valuechanged = function() { 
    // do something 
}; 
var inputtowatch = $('.selector'); 
inputtowatch.on('input', valuechanged); 
inputtowatch.on('keyup', valuechanged); // input event is buggy and doesn't catch delete/backspace in IE, but can't just use keyup alone as that doesn't catch paste and automcomplete 
inputtowatch.on('propertychange', valuechanged); // input event not supported in IE < 9 

Spodziewałem się, że stosując wiele zdarzeń jak może to spowodować funkcji wyrzuceniu wielokrotnie . Podczas moich testów w Firebug tak się nie stało. Jednak miałem szczęście nie zwracać uwagi na to, czy funkcja działała "zbyt wiele" razy, więc nie przetestowałem tego konkretnego aspektu dalej (np. Inne przeglądarki).

Powiązane problemy