it-swarm.com.de

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

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

EDIT

Entschuldigung, ich habe vergessen zu erwähnen. Sowohl .change() als auch .keyup() benötigen einige der Variablen, die in den Gültigkeitsbereich fallen.

65
cnotethegr8

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

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

docs hier .

hoffentlich hilft das. Prost!

151
keeganwatkins

Wenn Sie Seiteninhalte dynamisch generieren oder über AJAX laden, ist das folgende Beispiel genau der Weg, den Sie gehen sollten:

  1. Es verhindert Doppelbindung in Fällen, in denen das Skript mehr als einmal geladen wird, z. B. in einer AJAX Anforderung.
  2. Die Bindung befindet sich auf der Variablen body des Dokuments. Unabhängig davon, welche Elemente hinzugefügt, verschoben, entfernt und erneut hinzugefügt werden, behalten alle mit dem angegebenen Selektor übereinstimmenden Nachkommen von body die korrekte Bindung.

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

Beachten Sie bitte! Ich verwende $.on() und $.off() aus anderen Gründen anstelle von anderen Methoden:

  1. $.live() und $.die() sind veraltet und wurden in neueren Versionen von jQuery weggelassen.
  2. Ich muss entweder eine eigene Funktion definieren (also den globalen Gültigkeitsbereich unübersichtlich machen) und die Funktion separat an $.change() und $.keyup() übergeben, oder die gleiche Funktionsdeklaration an jede aufgerufene Funktion übergeben. Kopierlogik ... Was absolut inakzeptabel ist.
  3. Wenn Elemente zum DOM hinzugefügt werden, wird $.bind() bei der Erstellung nicht dynamisch an Elemente gebunden. Wenn Sie also an :input binden und dann eine Eingabe zum DOM hinzufügen, wird diese Bindungsmethode nicht an die neue Eingabe angehängt. Sie müssen dann explizit die Bindung aufheben und dann alle Elemente im DOM erneut binden (andernfalls werden Bindungen dupliziert). Dieser Vorgang muss jedes Mal wiederholt werden, wenn eine Eingabe zum DOM hinzugefügt wird.
18
Joshua Burns

Sie können die Änderungs- und Schlüsselereignisse abonnieren:

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

dabei ist myFunction die Funktion, die Sie ausführen möchten:

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

Mach das.

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

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

So funktionieren Events nicht. Stattdessen geben Sie ihnen eine Funktion, die aufgerufen wird, wenn sie passieren.

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

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 Registrierungsfunktionen für change () und keyup () geben den ursprünglichen Satz zurück, sodass sie verkettet werden können.

0
StuperUser

eingabeabfrage für das Keyup-Ereignis

Für 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>   
0
Devendra Dode