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

Question 1

Mit jQuery möchte ich eine Funktion ausführen, wenn entweder .change()oder .keyup()ausgelöst wird.

Etwas wie das.

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

BEARBEITEN

Entschuldigung, ich habe vergessen zu erwähnen. Beides .change()und .keyup()einige der Variablen müssen im Gültigkeitsbereich sein.

Question 2

Sie können an mehrere Ereignisse binden, indem Sie sie durch ein Leerzeichen trennen:

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

Dokumente hier .

hoffentlich hilft das. Prost!

Question 3

Wenn Sie jemals dynamisch Seiteninhalte generieren oder Inhalte über AJAX laden, ist das folgende Beispiel genau das Richtige für Sie:

Es verhindert die Doppelbindung, wenn das Skript mehrmals geladen wird, z. B. in einer AJAX-Anforderung.
Die Bindung befindet sich auf dem bodyDokument. Unabhängig davon, welche Elemente hinzugefügt, verschoben, entfernt und erneut hinzugefügt werden, bodybehalten alle Nachkommen, die mit dem angegebenen Selektor übereinstimmen, die ordnungsgemäße Bindung bei.

Der Code:

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

Bitte beachten Sie! Ich benutze aus mehreren Gründen $.on()und $.off()nicht andere Methoden:

$.live()und $.die()sind veraltet und wurden in neueren Versionen von jQuery weggelassen.
Ich müsste entweder eine separate Funktion definieren (wodurch der globale Bereich überfüllt wird) und die Funktion an beide $.change()und $.keyup()separat übergeben oder dieselbe Funktionsdeklaration an jede aufgerufene Funktion übergeben. Logik duplizieren ... Was absolut inakzeptabel ist.
Wenn Elemente jemals zum DOM hinzugefügt werden, werden sie beim Erstellen $.bind()nicht dynamisch an Elemente gebunden. Wenn Sie :inputan das DOM binden und dann eine Eingabe hinzufügen, wird diese Bindemethode daher nicht an die neue Eingabe angehängt. Sie müssten dann die Bindung explizit aufheben und dann erneut an alle Elemente im DOM binden (andernfalls werden Bindungen dupliziert). Dieser Vorgang müsste jedes Mal wiederholt werden, wenn eine Eingabe zum DOM hinzugefügt wurde.

Question 4

Mach das.

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

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

Question 5

Sie können die Änderungs- und Keyup-Ereignisse abonnieren:

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

Wo myFunctionist die Funktion, die Sie ausführen möchten:

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

Question 6

So funktionieren Ereignisse nicht. Stattdessen geben Sie ihnen eine Funktion, die aufgerufen werden soll, wenn sie auftreten.

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

Question 7

Schreiben Sie eine einzelne Funktion und rufen Sie sie für beide auf.

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

Die Ereignisregistrierungsfunktionen change () und keyup () geben den ursprünglichen Satz zurück, sodass sie verkettet werden können.

Question 8

Eingabe von Keyup-Ereigniseingaben

Für die Demo

$(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>

Erweitern Sie das Snippet

Answer 1

80

Mit jQuery möchte ich eine Funktion ausführen, wenn entweder .change()oder .keyup()ausgelöst wird.

Etwas wie das.

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

BEARBEITEN

Entschuldigung, ich habe vergessen zu erwähnen. Beides .change()und .keyup()einige der Variablen müssen im Gültigkeitsbereich sein.

javascript jquery function cnotethegr8
quelle

2

Ereignisse sind nicht "aktiv", sie werden ausgelöst.

StuperUser

need some of the variables to be in-scopeMeinen Sie Variablen aus dem Ereignis oder Variablen, die Sie beim Registrieren dieser Ereignishandler verwenden? Sie erhalten die Ereignisvariablen im Ereignisparameter (normalerweise benannt e), andernfalls müssen Sie sie möglicherweise auf Fensterebene oder auf Daten des Elements halten, bis die Ereignisse ausgelöst werden, oder sich die Abschlüsse ansehen.

StuperUser

Answer 2

2

Ereignisse sind nicht "aktiv", sie werden ausgelöst.

StuperUser

Answer 3

need some of the variables to be in-scopeMeinen Sie Variablen aus dem Ereignis oder Variablen, die Sie beim Registrieren dieser Ereignishandler verwenden? Sie erhalten die Ereignisvariablen im Ereignisparameter (normalerweise benannt e), andernfalls müssen Sie sie möglicherweise auf Fensterebene oder auf Daten des Elements halten, bis die Ereignisse ausgelöst werden, oder sich die Abschlüsse ansehen.

StuperUser

Answer 4

188

Sie können an mehrere Ereignisse binden, indem Sie sie durch ein Leerzeichen trennen:

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

Dokumente hier .

hoffentlich hilft das. Prost!

Keeganwatkins
quelle

7

Beachten Sie, dass die interne Funktion zweimal aufgerufen wird, wenn sich der Wert bei der Eingabe ändert (also fast immer). Siehe @ Joshua Burns Antwort, um damit umzugehen.

T30

aber es wird zweimal ausgeführt, einmal für "keyup" und einmal für "change" ... warum?

Rahul Pawar

6

Sollte .on () anstelle von .bind () verwenden

StefanBob

Answer 5

7

Beachten Sie, dass die interne Funktion zweimal aufgerufen wird, wenn sich der Wert bei der Eingabe ändert (also fast immer). Siehe @ Joshua Burns Antwort, um damit umzugehen.

T30

Answer 6

aber es wird zweimal ausgeführt, einmal für "keyup" und einmal für "change" ... warum?

Rahul Pawar

Answer 7

6

Sollte .on () anstelle von .bind () verwenden

StefanBob

Answer 8

Wenn Sie jemals dynamisch Seiteninhalte generieren oder Inhalte über AJAX laden, ist das folgende Beispiel genau das Richtige für Sie:

Es verhindert die Doppelbindung, wenn das Skript mehrmals geladen wird, z. B. in einer AJAX-Anforderung.
Die Bindung befindet sich auf dem bodyDokument. Unabhängig davon, welche Elemente hinzugefügt, verschoben, entfernt und erneut hinzugefügt werden, bodybehalten alle Nachkommen, die mit dem angegebenen Selektor übereinstimmen, die ordnungsgemäße Bindung bei.

Der Code:

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

Bitte beachten Sie! Ich benutze aus mehreren Gründen $.on()und $.off()nicht andere Methoden:

$.live()und $.die()sind veraltet und wurden in neueren Versionen von jQuery weggelassen.
Ich müsste entweder eine separate Funktion definieren (wodurch der globale Bereich überfüllt wird) und die Funktion an beide $.change()und $.keyup()separat übergeben oder dieselbe Funktionsdeklaration an jede aufgerufene Funktion übergeben. Logik duplizieren ... Was absolut inakzeptabel ist.
Wenn Elemente jemals zum DOM hinzugefügt werden, werden sie beim Erstellen $.bind()nicht dynamisch an Elemente gebunden. Wenn Sie :inputan das DOM binden und dann eine Eingabe hinzufügen, wird diese Bindemethode daher nicht an die neue Eingabe angehängt. Sie müssten dann die Bindung explizit aufheben und dann erneut an alle Elemente im DOM binden (andernfalls werden Bindungen dupliziert). Dieser Vorgang müsste jedes Mal wiederholt werden, wenn eine Eingabe zum DOM hinzugefügt wurde.

Answer 9

Was macht die zweite Zeile?

Varun

Answer 10

@VarunDas, var bind_to = ':input';wird eine Variable bezeichnet , bind_todie ein Selektor ist , alle Eingangstypen zu greifen, wie zum Beispiel input, , textareaund button.

Joshua Burns

Answer 11

Wenn ich für bestimmte Elemente möchte: var bind_to = '#myInput';Der Ajax-Aufruf wird ohnehin zweimal ausgeführt. Warum???

Pathros

Answer 12

@Pathros Ich müsste ein Beispiel sehen, dieser Thread ist nicht der richtige Ort. Schießen Sie mir eine Nachricht auf LinkedIn oder so

Joshua Burns

Answer 13

3

Mach das.

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

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

brenjt
quelle

change()und keyup()geben Sie das verpackte Set zurück, damit Sie es verketten können.

StuperUser

Du könntest, könntest du nicht. Vielen Dank.

Brenjt

Die Kette eliminiert auch die zweite Abfrage über das DOM.

Keeganwatkins

Answer 14

change()und keyup()geben Sie das verpackte Set zurück, damit Sie es verketten können.

StuperUser

Answer 15

Du könntest, könntest du nicht. Vielen Dank.

Brenjt

Answer 16

Die Kette eliminiert auch die zweite Abfrage über das DOM.

Keeganwatkins

Answer 17

Sie können die Änderungs- und Keyup-Ereignisse abonnieren:

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

Wo myFunctionist die Funktion, die Sie ausführen möchten:

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

Answer 18

So funktionieren Ereignisse nicht. Stattdessen geben Sie ihnen eine Funktion, die aufgerufen werden soll, wenn sie auftreten.

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

Answer 19

Schreiben Sie eine einzelne Funktion und rufen Sie sie für beide auf.

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

Die Ereignisregistrierungsfunktionen change () und keyup () geben den ursprünglichen Satz zurück, sodass sie verkettet werden können.

Answer 20

Eingabe von Keyup-Ereigniseingaben

Für die Demo

$(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>

Erweitern Sie das Snippet

Answer 21

Schätzen Sie das einzigartige Beispiel, obwohl das OP nach einer kombinierten Keyup- und Änderungslösung suchte ...

Burndog

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

Antworten: