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

Question 1

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.

Question 2

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!

Question 3

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.

Question 4

Zrób to.

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

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

Question 5

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

Question 6

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!");
});

Question 7

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.

Question 8

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

Answer 1

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

Answer 2

2

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

StuperUser

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Rahul Pawar

Answer 7

6

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

StefanBob

Answer 8

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.

Answer 9

Co robi druga linia?

Varun,

Answer 10

@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

Answer 11

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

Pathros

Answer 12

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

Joshua Burns

Answer 13

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

Answer 14

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

StuperUser

Answer 15

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

brenjt

Answer 16

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

keeganwatkins

Answer 17

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

Answer 18

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!");
});

Answer 19

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.

Answer 20

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

Answer 21

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

kluczowania

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

Odpowiedzi: