jQuery 'if .change () lub .keyup ()'

82

Korzystając z jQuery, chciałbym uruchomić funkcję, gdy są podniesione .change()lub .keyup().

Coś takiego.

if ( jQuery(':input').change() || jQuery(':input').keyup() )
{
    alert( 'something happened!' );
}

EDYTOWAĆ

Przepraszam, zapomniałem wspomnieć. Oba .change()i .keyup()wymagają, aby niektóre zmienne znajdowały się w zakresie.

javascript jquery function

— cnotethegr8
źródło

2

Wydarzenia nie są „aktywne”, są wywoływane.

— StuperUser

need some of the variables to be in-scopemasz na myśli zmienne ze zdarzenia lub zmienne, których używasz podczas rejestrowania tych programów obsługi zdarzeń? Otrzymujesz zmienne zdarzenia w parametrze zdarzenia (zwykle nazywanym e), w przeciwnym razie możesz potrzebować zachować je na poziomie okna lub danych w elemencie do momentu wywołania zdarzeń lub spojrzeć na zamknięcia.

— StuperUser

189

możesz powiązać wiele wydarzeń, oddzielając je spacjami:

$(":input").on("keyup change", function(e) {
    // do stuff!
})

dokumenty tutaj .

mam nadzieję, że to pomoże. Twoje zdrowie!

— keeganwatkins
źródło

7

Należy pamiętać, że funkcja wewnętrzna jest wywoływana dwukrotnie, jeśli wartość zmienia się po naciśnięciu klawisza (więc prawie zawsze). Zobacz odpowiedź @Joshua Burns, aby sobie z tym poradzić.

— T30

ale wykonuje dwa razy jeden dla „keyup” i jeden dla „change” ... dlaczego?

— Rahul Pawar

6

Powinien używać .on () zamiast .bind ()

— StefanBob

23

Jeśli kiedykolwiek dynamicznie generujesz zawartość strony lub ładujesz zawartość przez AJAX, następujący przykład jest naprawdę właściwy:

Zapobiega podwójnemu wiązaniu w przypadku, gdy skrypt jest ładowany więcej niż raz, na przykład w żądaniu AJAX.
Powiązanie żyje w bodydokumencie, więc niezależnie od tego, jakie elementy są dodawane, przenoszone, usuwane i ponownie dodawane, wszystkie elementy potomne bodypasujące do określonego selektora zachowają właściwe powiązanie.

Kod:

// Define the element we wish to bind to.
var bind_to = ':input';

// Prevent double-binding.
$(document.body).off('change', bind_to);

// Bind the event to all body descendants matching the "bind_to" selector.
$(document.body).on('change keyup', bind_to, function(event) {
    alert('something happened!');
});

Proszę zauważyć! Używam $.on()i $.off()zamiast innych metod z kilku powodów:

$.live()i $.die()są przestarzałe i zostały pominięte w nowszych wersjach jQuery.
Musiałbym albo zdefiniować oddzielną funkcję (w ten sposób zaśmiecając globalny zakres) i przekazać tę funkcję do obu $.change()i $.keyup()osobno, albo przekazać tę samą deklarację funkcji do każdej wywoływanej funkcji; Powielanie logiki ... Co jest absolutnie niedopuszczalne.
Jeśli elementy zostaną kiedykolwiek dodane do DOM, $.bind()nie wiąże się dynamicznie z elementami podczas ich tworzenia. Dlatego jeśli połączysz się z, :inputa następnie dodasz wejście do DOM, ta metoda wiązania nie zostanie dołączona do nowego wejścia. Następnie musiałbyś jawnie cofnąć wiązanie, a następnie ponownie związać się ze wszystkimi elementami w DOM (w przeciwnym razie wiązania zostaną zduplikowane). Ten proces musiałby być powtarzany za każdym razem, gdy dane wejściowe były dodawane do DOM.

— Joshua Burns
źródło

Co robi druga linia?

— Varun,

@VarunDas, var bind_to = ':input';tworzy zmienną o nazwie bind_to, która jest selektor, aby pobrać wszystkie typy wejściowych, takich jak input, textareai button.

— Joshua Burns

Jeśli chcę dla określonych elementów: var bind_to = '#myInput';i tak wywołanie Ajax wykonuje się dwukrotnie. Czemu???

— Pathros

@Pathros Chciałbym zobaczyć przykład, ten wątek nie jest miejscem. Wyślij mi wiadomość na LinkedIn czy coś

— Joshua Burns

3

Zrób to.

$(function(){
    var myFunction = function()
    {
        alert("myFunction called");
    }

    jQuery(':input').change(myFunction).keyup(myFunction);
});

— brenjt
źródło

change()i keyup()zwróć zapakowany zestaw, aby móc go połączyć.

— StuperUser

Mógłbyś, nie mógłbyś. Dzięki.

— brenjt

łańcuch eliminuje również drugie zapytanie przez DOM.

— keeganwatkins

2

Możesz zapisać się na wydarzenia change i keyup:

$(function() {
    $(':input').change(myFunction).keyup(myFunction);
});

gdzie myFunctionjest funkcja, którą chcesz wykonać:

function myFunction() {
    alert( 'something happened!' );
}

— Darin Dimitrov
źródło

1

Nie tak działają wydarzenia. Zamiast tego dajesz im funkcję, która ma być wywołana, gdy się pojawią.

$("input").change(function() {
    alert("Something happened!");
});

— Alex Turpin
źródło

0

Napisz jedną funkcję i wywołaj ją dla obu.

function yourHandler(e){
    alert( 'something happened!' );        
}
jQuery(':input').change(yourHandler).keyup(yourHandler);

Funkcje rejestracji zdarzeń change () i keyup () zwracają oryginalny zestaw, dzięki czemu można je połączyć w łańcuch.

— StuperUser
źródło

0

wejście zdarzenia keyup jQuery

Do wersji demonstracyjnej

$(document).ready(function(){  
    $("#tutsmake").keydown(function(){  
        $("#tutsmake").css("background-color", "green");  
    });  
    $("#tutsmake").keyup(function(){  
        $("#tutsmake").css("background-color", "yellow");  
    });  
});

<!DOCTYPE html>  
<html>  
<title> jQuery keyup Event Example </title>
<head>  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
Fill the Input Box: <input type="text" id="tutsmake">  
</body>  
</html>

Rozwiń fragment

— Deweloper
źródło

Doceń wyjątkowy przykład, mimo że OP szukał połączonego rozwiązania

— kluczowania