[Erledigt] JavaScript reagiert auf nicht mehr vorhandenen Klassennamen

[Lightshade]

Abend zusammen!

Vorab die Entschuldigung dafür, sollte mein erster Beitrag in diesem Forum nicht den eingegliederten Normen entsprechen.

JavaScript ärgert mich momentan mit einem für mich nicht lösbaren Problem.

Ich stelle auf einer Seite einen Beitrag dar, unter dem die Option "Bearbeiten" zur Verfügung steht.
Wird diese Option angeklickt, wird der Beitrag durch eine Textarea ersetzt, die nun den Inhalt des Beitrags beinhaltet.
Die Option "Bearbeiten" wird durch die Option "Speichern" ersetzt.



Die Option "Bearbeiten" ist mit der Klasse "editPost" ausgestattet, auf deren Klick ich mit jQuery's .click()-Funktion reagiere. Die Funktion an sich sieht folgendermaßen aus:

$(".editPost").click(function(){
		var content = $(this).closest(".activityContentContainer").children(".activityContent").text();
		$(this).closest(".activityContentContainer").children(".activityContent").text("").append("<textarea class='updatePostTextArea'>"+content+"</textarea>");
		$(this).removeClass('editPost').addClass('saveEditedPost').text("Speichern");
	});

Mein Problem an der Sache ist nun, dass es funktioniert... aber irgendwie auch nicht.

Die Entwicklertools von Firefox und Chrome zeigen mir, dass die Klasse tatsächlich ausgetauscht wurde.
Jedoch wird bei Klick auf die Option "Speichern", die nun nur über die Klasse "saveEditedPost" verfügt,
immer noch die .click()-Funktion für die Klasse "editPost" ausgeführt.
Damit wird der geänderte Inhalt der Textarea wieder auf den Inhalt zurückgesetzt, den man anfangs bearbeiten wollte... was auf mich persönlich nicht sonderlich zielführend wirkt.

Zwar könnte ich das alte Element "Bearbeiten" entfernen und ein neues Element "Speichern" mit der gewünschten Klasse "saveEditedPost" generieren, jedoch würde das nicht meine Neugierde stillen, warum dieses Problem auftaucht.

Würde mich freuen, wenn mir hier jemand Klarheit über diese Merkwürdigkeit verschaffen könnte.

Viele Grüße!

[tkausl]

Zwar könnte ich das alte Element "Bearbeiten" entfernen und ein neues Element "Speichern" mit der gewünschten Klasse "saveEditedPost" generieren, jedoch würde das nicht meine Neugierde stillen, warum dieses Problem auftaucht.

Das liegt daran, dass der Selektor, nachdem er die Elemente gefunden hat, nichtmehr existiert. Er sucht nur alle Elemente, auf die er passt, und gibt diese dann zurück. Der onClick-Handler wird somit an die Elemente (DOM-Tags) gebunden, nicht an den Selektor. Selbst wenn du dann die Klasse, die ID oder andere Attribute änderst, der Handler ist immernoch an ein und dem selben Element. Erst wenn du wieder per Selektor die Elemente suchst, auf die er zutrifft, wird dieses Element dann nicht mehr gefunden.

[Lightshade]

Das ging fix,

vielen Dank für die schnelle und erklärende Antwort!