Delegation in jQuery

Wenn Sie JavaScript gelernt haben, sind Sie bereits auf das Thema Ereignisdelegation gestoßen, mit der man beispielsweise Probleme beim Hinzufügen von Ereignissen für neue Elemente beseitigen kann. Schauen wir uns an, wie das in jQuery aussehen wird.

Nehmen wir den folgenden HTML-Code:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

CSS dafür sieht so aus:

li {
	width: 100px;
	cursor: pointer;
}

Lassen Sie uns nun mit der Methode on, die Methode click nicht auf den Listenpunkt li binden, wie wir es in vorherigen Lektionen getan haben, sondern auf die Liste selbst ul. Außerdem übergeben wir als zweiten (optionalen) Parameter 'li' als Selektor für Nachfolgerelemente. Schauen wir uns an, was dabei herauskommt:

$('ul').on('click', 'li', function() {
	$(this).append('!');
});

Gegeben ist ein ul, darin sind mehrere li. Unter dem ul erstellen Sie einen Button, bei dessen Betätigung am Ende des ul ein neues li mit dem Text 'punkt' hinzugefügt wird. Sorgen Sie dafür, dass bei einem Klick auf jedes li an dessen Ende ein '!' hinzugefügt wird. Dies soll auch für neu hinzugefügte li funktionieren. Lösen Sie die Aufgabe mit Delegation (das Ereignis muss also auf den ul gebunden sein).

Gegeben ist eine Tabelle mit Benutzern mit zwei Spalten: Vorname und Nachname. Unter der Tabelle erstellen Sie ein Formular, mit dem ein neuer Benutzer zur Tabelle hinzugefügt werden kann. Sorgen Sie dafür, dass bei einem Klick auf eine beliebige Zelle ein prompt erscheint, mit dem der Text der Zelle geändert werden kann. Lösen Sie die Aufgabe mit Delegation (das Ereignis muss auf die table gebunden sein).