jQuery - Click

Einleitung

jQuery ist eine freie Bibliothek (Framework), welche Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt.

Click-Event

Aufgrund des Click-Events kann beim Klicken auf ein definiertes Element eine Funktion ausgeführt werden. Implementiert wird dies folgendermassen:

$( '#id' ).on( 'click', function() {
   // do something
});

Mit $( '#id' ) wird anhand einer definierten ID ein entsprechendes DOM-Element* ausgelesen. Anschliessend wird mit .on( 'click', function() {} ) ein Click-Event auf das Element gesetzt.
Innerhalb der function() wird definiert, was geschehen soll, wenn das Element geklickt wird.

Für den Click-Event gibt es ausserdem eine Kurzschreibweise, die wie folgt aussieht:

$( '#id' ).click( function() {
   // do something
});

Hierbei liegt der einzige Unterschied im Aufruf des Events, der Rest bleibt gleich.

Reflexion

Im Nussbaumprojekt musste ich bei der Schnellbestellung einen Button einbauen, welcher jeweils die zugehörige Zeile in einer Tabelle zurücksetzt. Der Button und das Click-Event mussten über jQuery eingebettet werden, da die Tabelle ihr dynamisches Verhalten beibehalten sollte.

Da ich zuvor nie einen Click-Event mit jQuery gemacht habe, wusste ich nicht wie dies umgesetzt wird und musste im Internet recherchieren. Damit ich künftig schneller an die Information komme, wie man einen Click-Event erstellt, habe ich diese Lerndokumentation geschrieben.
 

*In HTML DOM, entspricht ein Element einem HTML Tag bspw. P, DIV, TABLE oder SPAN.