Wie kann ich mit jQuery dieselbe Funktion von mehreren Ereignissen auslösen?

Lesezeit: 4 Minuten

Benutzer-Avatar
Shaneburg

Gibt es eine Möglichkeit zu haben keyup, keypress, blurund change Ereignisse rufen dieselbe Funktion in einer Zeile auf oder muss ich sie separat ausführen?

Das Problem, das ich habe, ist, dass ich einige Daten mit einer db-Suche validieren muss und sicherstellen möchte, dass die Validierung auf keinen Fall verpasst wird, egal ob sie in das Feld eingegeben oder eingefügt wird.

Benutzer-Avatar
Tatu Ulmanen

Sie können verwenden .on() So binden Sie eine Funktion an mehrere Ereignisse:

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

Oder übergeben Sie die Funktion einfach als Parameter an normale Ereignisfunktionen:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

  • Wie schließen Sie bei durch Leerzeichen getrennten Ereignissen auch Namensabstände ein? .on('keyup.foo keypress.foo blur.foo change.foo', …) oder .on('keyup keypress blur change .foo', …)?

    – Sukima

    14. Dezember 2015 um 14:48 Uhr

  • Das Problem dabei ist, dass myFunction wahrscheinlich mehrmals aufgerufen wird, was Sie vielleicht verhindern möchten.

    – Esger

    21. Januar 2016 um 9:51 Uhr

  • Wie kann ich Parameter in dieser Funktion übergeben?

    – HalfWebDev

    26. Mai 2016 um 7:45 Uhr

  • @Esger Wie auch immer, um das zu tun? Im Handy muss ich immer on('click tap', e => {...}). Der Listener kann zweimal getriggert werden, ich möchte nur einmal triggern, wie kann ich die Listener-Funktion codieren?

    – Tomisation

    10. November 2016 um 14:34 Uhr

  • @Tomlsion Fügen Sie dem Element in der aufgerufenen Funktion möglicherweise einen Klassennamen ‘busy’ hinzu, und dann $('#element:not(.busy)').on('keyup keypress blur change', function(e){…}); Entfernen Sie abschließend den Klassennamen „busy“.

    – Esger

    4. Dezember 2016 um 21:57 Uhr


Benutzer-Avatar
Lesyk

Ab jQuery 1.7 ist die .on() -Methode ist die bevorzugte Methode zum Anhängen von Ereignishandlern an ein Dokument. Für frühere Versionen, die .bind() -Methode wird verwendet, um einen Ereignishandler direkt an Elemente anzuhängen.

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})

  • Dies wird für eine delegierte Veranstaltung durchgeführt, es wird funktionieren, aber es ist weder der einfachste noch der effizienteste Weg, dies zu tun.

    – Ben Taliadoros

    8. April 2014 um 15:19 Uhr

  • Die Ereignisdelegierung ist wichtig und kann (oder auch nicht) erforderlich sein, je nachdem, wann das Skript geladen/ausgeführt wird und ob die Elemente zum Zeitpunkt des Ladens/Ausführens des Skripts im DOM vorhanden sind.

    – zufälliger_Benutzername

    11. Januar 2017 um 16:57 Uhr

Ich habe nach einer Möglichkeit gesucht, den Ereignistyp zu erhalten, wenn jQuery mehrere Ereignisse gleichzeitig abhört, und Google hat mich hierher gebracht.

Also für Interessierte event.type ist meine Antwort:

$('#element').on('keyup keypress blur change', function(event) {
    alert(event.type); // keyup OR keypress OR blur OR change
});

Mehr Infos im jQuery-Dokument.

Sie können verwenden Bindungsmethode um mehreren Ereignissen eine Funktion zuzuordnen. Übergeben Sie einfach die Ereignisnamen und die Handler-Funktion wie in diesem Code:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

Eine weitere Option ist die Verwendung der Verkettungsunterstützung von jquery api.

Wenn Sie denselben Event-Handler an mehrere Events anhängen, stoßen Sie oft auf das Problem, dass mehr als eines von ihnen gleichzeitig ausgelöst wird (z. B. der Benutzer drückt nach der Bearbeitung die Tabulatortaste; Keydown, Change und Blur könnten alle ausgelöst werden).

Es hört sich so an, als ob Sie eigentlich Folgendes wollen:

$('#ValidatedInput').keydown(function(evt) {
  // If enter is pressed
  if (evt.keyCode === 13) {
    evt.preventDefault();

    // If changes have been made to the input's value, 
    //  blur() will result in a change event being fired.
    this.blur();
  }
});

$('#ValidatedInput').change(function(evt) {
  var valueToValidate = this.value;

  // Your validation callback/logic here.
});

Benutzer-Avatar
Arsen Chatschaturjan

Gibt es eine Möglichkeit zu haben keyup, keypress, blurund change Ereignisse rufen dieselbe Funktion in einer Zeile auf?

Es ist möglich mit .on()die die folgende Struktur akzeptiert: .on( events [, selector ] [, data ], handler ), sodass Sie mehrere Ereignisse an diese Methode übergeben können. In deinem Fall sollte es so aussehen:

$('#target').on('keyup keypress blur change', function(e) {
    // "e" is an event, you can detect the type of event using "e.type"
});

Und hier ist das Live-Beispiel:

$('#target').on('keyup keypress blur change', function(e) {
  console.log(`"${e.type.toUpperCase()}" event happened`)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="target">

Benutzer-Avatar
Mohammed

So mache ich es.

$("input[name="title"]").on({
    "change keyup": function(e) {
        var slug = $(this).val().split(" ").join("-").toLowerCase();
        $("input[name="slug"]").val(slug);
    },
});

1011680cookie-checkWie kann ich mit jQuery dieselbe Funktion von mehreren Ereignissen auslösen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy