jQuery / Method / .click() - Aktionen beim Anklicken ausführen

jQuerys .click(handler) registriert eine Funktion für Klicks; .click() ohne Argument löst das Ereignis aus. Neuer Code registriert mit .on("click", handler) und löst mit .trigger("click") aus. Delegieren Sie an ein beständiges Elternelement, wenn später ergänzte Buttons ebenfalls reagieren sollen.

Registrieren und Auslösen getrennt migrieren

Die Dokumentation zu .click() kennzeichnet die API seit jQuery 3.3 als veraltet. Das bedeutet nicht entfernt: Der Vergleich von Kurzform und Ersatz wurde mit 3.7.1 und 4.0.0 erfolgreich ausgeführt. Neuer Code folgt hier den empfohlenen Alternativen .on() und .trigger().

handler ist die beim Ereignis auszuführende Funktion. Übergeben Sie die Referenz, statt handler() sofort aufzurufen. Direkte Bindung verlangt vorhandene Elemente; das Beispiel wählt nach Dokumentbereitschaft einen beständigen Elternteil aus.

Vollständiges Beispiel für Klicks, Auslösen und Entfernen

Speichern Sie alles als UTF-8 in click-demo.html und öffnen Sie die Datei im Browser. Keine Installation ist nötig, aber Internet zum Laden der offiziellen jQuery-Datei über das Content Delivery Network (CDN). Der Code verwendet 4.0.0; Klicks, Hinzufügen, erneute Bindung, Entfernen und Reset wurden mit 3.7.1 und 4.0.0 ausgeführt.

Alpha und das spätere Beta sind die gezählten Buttons. Die übrigen steuern die Übung. Jede Aktivierung zeigt Namen und Gesamtzahl und schaltet die Markierung um. Alle Buttons besitzen type="button", damit sie auch innerhalb eines Formulars keine unbeabsichtigte Übermittlung auslösen.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Click handlers and delegated events</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    button { padding: 10px; margin: 4px; }
    .item.selected { outline: 3px solid #b66b00; background: #fff3cf; }
    #items { border: 1px solid #ccc; padding: 12px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Click handlers and delegated events</h1>
  <div id="items">
    <button type="button" class="item" id="first"><span>Alpha</span></button>
  </div>
  <button type="button" id="add">Add Beta</button>
  <button type="button" id="trigger">Trigger Alpha</button>
  <button type="button" id="bind">Enable or rebind</button>
  <button type="button" id="stop">Stop demo handler</button>
  <button type="button" id="reset">Reset</button>
  <p>Handler: <span id="status"></span></p>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      let clicks = 0;
      let last = "none";
      function render() {
        $("#result").text(`last=${last} | clicks=${clicks}`);
      }
      function handleClick(event) {
        clicks++;
        last = $(this).text();
        $(this).toggleClass("selected");
        render();
      }
      function bind() {
        $("#items").off("click.demo", ".item")
          .on("click.demo", ".item", handleClick);
        $("#status").text("enabled");
      }
      $("#add").on("click", function () {
        if (!$("#second").length) {
          $("<button>").attr({ type: "button", id: "second" })
            .addClass("item").text("Beta").appendTo("#items");
        }
      });
      $("#trigger").on("click", () => $("#first").trigger("click"));
      $("#bind").on("click", bind);
      $("#stop").on("click", function () {
        $("#items").off("click.demo", ".item");
        $("#status").text("stopped");
      });
      $("#reset").on("click", function () {
        $("#second").remove();
        $("#first").removeClass("selected");
        clicks = 0;
        last = "none";
        bind();
        render();
      });
      bind();
      render();
    });
  </script>
</body>
</html>

Anfangs zeigt Handler enabled und das Ergebnis lautet:

last=none | clicks=0

1. Alpha ergibt last=Alpha | clicks=1 und eine Markierung. Trigger Alpha aktiviert denselben Button aus Code, erhöht auf 2 und entfernt die Markierung.
2. Add Beta und dann Beta ergeben last=Beta | clicks=3. Die Prüfung der second-ID verhindert mehrere Beta-Buttons.
3. Mehrfach Enable or rebind, dann einmal Alpha: Die Zahl wird 4. Doppelte Registrierung vervielfacht den Aufruf nicht.
4. Stop demo handler zeigt stopped. Die Aufgabenbuttons verändern weder Übungszähler noch Markierungen. Enable or rebind setzt die Verarbeitung fort.
5. Reset entfernt Beta und Alphas Markierung, setzt die Zahl auf null und aktiviert den Handler. Alpha beginnt danach wieder bei 1.

Dynamische Buttons, this und event.target

Delegation mit .on() bindet an #items und verarbeitet Klicks passender .item-Nachfahren. Bubbling, die Weitergabe zu Eltern, macht eine neue Bindung für Beta unnötig. Stoppt anderer Code unterwegs die Weitergabe, erreicht das Ereignis den delegierten Handler möglicherweise nicht.

In der normalen Funktion handleClick bezeichnet this den zu .item passenden Button. Beim Klick auf Alphas span kann event.target das span sein, this bleibt jedoch der Button. So ändert sich dessen ganze Klasse. Ersetzen Sie eine solche Funktion nicht beiläufig durch eine Pfeilfunktion. Native Buttons erlauben außerdem die Aktivierung per Enter nach dem Fokussieren.

Gezielt entfernen und doppelte Bindung verhindern

.off() erhält Ereignisnamensraum und denselben Delegationsselektor, um nur den Übungshandler zu entfernen. Bei click.demo ist click der Ereignisname und demo die Kennzeichnung der Gruppe. .off("click.demo", ".item") vor der Registrierung hält wiederholtes Enable or rebind bei einem Aufruf.

.off() ohne Argumente auf dem Elternteil kann auch andere Funktionen entfernen. Beschränken Sie die Entfernung passend. Reset bereinigt nur ergänzten Eintrag, Markierung und Zähler der Übung und schaltet ihren Handler wieder ein.

Altes .click() und Ersatz vergleichen

Führen Sie diesen Teilcode in der Entwicklerkonsole aus. Zwei vorübergehende, nicht ins Dokument eingefügte Buttons vergleichen die Formen. Beide laufen einmal:

let legacy = 0;
const $old = $("<button>").click(() => legacy++);
$old.click();
console.log(legacy);
let modern = 0;
$("<button>").on("click", () => modern++).trigger("click");
console.log(modern);

1
1

.trigger() führt registrierte Ereignisverarbeitung aus und kann weitergereicht werden. Es bildet reale Benutzereingaben nicht vollständig nach. Nehmen Sie deshalb keine Gleichwertigkeit für Funktionen an, die Browseraktivierung durch Benutzer verlangen. Hier werden normale Buttonzähler und Klassen verglichen.

Prüfen Sie bei fehlender Reaktion jQuery in Network, Fehler und Version in Console, Selektoren, den vorhandenen Elternteil beim Binden und Stop. Mehrfache Ausführung pro Klick verlangt eine Prüfung wiederholter Initialisierung und des Entfernungsbereichs.