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


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.


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

Antworten:


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!


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

22

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

  1. Es verhindert die Doppelbindung, wenn das Skript mehrmals geladen wird, z. B. in einer AJAX-Anforderung.
  2. 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:

  1. $.live()und $.die()sind veraltet und wurden in neueren Versionen von jQuery weggelassen.
  2. 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.
  3. 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.

Was macht die zweite Zeile?
Varun

@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

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

@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

3

Mach das.

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

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

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

2

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

1

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

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

0

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.


0

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>   


Schätzen Sie das einzigartige Beispiel, obwohl das OP nach einer kombinierten Keyup- und Änderungslösung suchte ...
Burndog
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.