Kann alles. Weiß alles. Macht alles.

JQuery Event Listener für hinzugefügten Inhalt

Wenn auf einer Webseite nach dem Laden Inhalt hinzugefügt wird, funktionieren Event Listener auf diesen hinzugefügten Inhalt nicht.  Nehmen wir diesen JQuery-Code:

$("p").click(function(){
   $(this).after("<p>Another paragraph!</p>");
});

Beim Klick auf einen Absatz wird danach ein neuer Absatz eingefügt mit dem Inhalt Another paragraph!. Klickt man auf diesen neuen Absatz Another paragraph! passiert nichts, obwohl laut dem JQuery-Code ja eigentlich beim Klick auf einen Absatz ein weiterer Absatz eingefügt werden soll.

Eine längere Schreibweise für o.g. Code ist diese hier mit der bind-Methode:

$("p").bind("click", function(){
   $(this).after("<p>Another paragraph!</p>");
});

Die Lösung, damit Event Listener auch auf hinzugefügten Inhalt funktionieren, ist die live-Methode:

$("p").live("click", function(){
   $(this).after("<p>Another paragraph!</p>");
});

Jetzt kann man auch auf Another paragraph! klicken und bekommt einen weiteren Absatz.

Übrigens ist diese live-Methode auch die Lösung, um in seinem selbst entworfenen Widget im neuen Admin-Panel (seit Wordpress Version 2.8 ist die Widget Administration überarbeitet) Events per JQuery jederzeit benutzen zu können. Das Problem ist ansonsten nämlich, dass man das per Drag & Drop hinzugefügte Widget-Administrationspanel erst abspeichern musste, ehe JQuery-Events funktionieren.

Leave a comment for: "JQuery Event Listener für hinzugefügten Inhalt"

Tag Cloud