Schlagwort-Archive: bind

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:

[code language=“js“]
$("p").click(function(){
$(this).after("<p>Another paragraph!</p>");
});
[/code]

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:

[code language=“js“]
$("p").bind("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
[/code]

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

[code language=“js“]
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
[/code]

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.