Jquery verarbeitung von herein geladenen elementen

[jochen]

hallo liebe commuity,

mich plagt mal wieder ein problem...

und zwar die verarbeitung von jquery von herein geladenen elementen.

Da ich das ganze schwer beschreieben kann zeig ich es euch einfach mal:

  
$( "#container .itemh1" ).append( '<div class="close">X</div>' );  

  
 $( ".close" ).click(function() {  
  
		  alert("bla")  
  
  });  

Bis hier hin funktioniert alles noch wunderbar, doch wen ich die close klasse irgentwo einfüge tut sich da nix.

  
  
ui.item.find(".itemh1").append( '<div class="close">X</div>' )  
  

ich hoffe jemand kann mir helfen besten dank jochen

[jochen]

Bis hier hin funktioniert alles noch wunderbar, doch wen ich die close klasse irgentwo einfüge tut sich da nix.

ui.item.find(".itemh1").append( '<div class="close">X</div>' )

  
  
Wenn ich die klasse mittels einer anderen Funktion irgentwo einfüge mein ich

[ralphi]

hi,

ui.item.find(".itemh1").append( '<div class="close">X</div>' )

geht das überhaupt, dass ein ereigniss (click, append ..) ohne vorangestelltes $(' ') fuzt?  
Viele Grüße aus LA

-- 
ralphi

[jochen]

geht das überhaupt, dass ein ereigniss (click, append ..) ohne vorangestelltes $(' ') fuzt?
Viele Grüße aus LA

ich weiß nicht genau was du meinst aber das div wird problemlos eingefügt.

[molily]

Hallo,

$( "#container .itemh1" ).append( '<div class="close">X</div>' );

$( ".close" ).click(function() { … });

>   
> Bis hier hin funktioniert alles noch wunderbar, doch wen ich die close klasse irgentwo einfüge tut sich da nix.  
  
Das ist logisch.  
  
`$('CSS-Selektor')`{:.language-javascript} durchsucht das Dokument nach Elementen anhand des gegebenen Selektors. Es stellt also eine Liste von Elementen zusammen, die sich \*zu diesem Zeitpunkt\* im Dokument befinden. (Ein jQuery-Objekt ist eine spezielle Liste mit DOM-Elementen.)  
  
Mit `$('.close').click(…)`{:.language-javascript} registrierst du einen Event-Handler an eben diesen gefundenen Elementen. Das betrifft \*nicht\* Elemente, die sich \*zukünftig\* im DOM befinden werden.  
  
Das Problem lässt sich mit [Event Delegation](http://molily.de/js/event-handling-effizient.html) lösen. Dabei registrierst du einen Event-Handler bei einem gemeinsamen Elternelement und nutzt aus, dass die Events vom Zielelement im DOM-Baum nach oben aufsteigen (genannt [Event-Bubbling](http://molily.de/js/event-handling-objekt.html#bubbling)).  
  
Das geht in jQuery etwa so:  
  
~~~javascript
$(document.body).on('click', '.close', function() {  
  // …  
});

Das heißt soviel wie:

Überwache alle Klick-Ereignise zentral beim body-Element. Wenn ein Element innerhalb von body geklickt wurde, auf das der Selektor ».close« zutrifft, so rufe die Handler-Funktion auf.

Da sich das body-Element (hoffentlich) die ganze Zeit im Dokument befindet, betrifft dieses Event-Handling alle Elemente, auf die der Selektor zutrifft. Egal, ob sie sich bereits im DOM befinden oder erst zukünftig eingefügt werden.

Anstatt von document.body kannst du natürlich ein passenderes Elternelement verwenden, falls du nicht dokumentweit Klicks überwachen möchtest. Siehe auch die jQuery-Referenz zu on().

Der Vorteil von Event-Delegation ist, dass nicht bei jedem Element, bei dem der Event passieren kann, einzeln ein Handler registriert werden muss.

Grüße,
Mathias

[jochen]

und wieder was dazu gelernt denke

[ralphi]

hi

das hab ich auch gemeint. hab aber nicht gewusst - warum genau das so geht.
gute erklährung ;-)

Viele Grüße aus LA

[suit]

Ergänzend:

In ältereren jQuery-Funktionen gab es anstatt "on" die drei Methoden "bind", "live" und delegate" - wobei die 2-Argument-Schreibweis von "on" der Funktion von "bind" entspricht und die 3-Argument-Variante die molily - live selbst nutzt ebenfalls die Event-Delegation, allerdings immer auf das komplette Dokument, was zwar "idiotensicher" aber ziemlich ressourcenlastig ist.

Wenn man also auf ein altes Script mit bind/live/delegate stößt, kann man das einfach auf on umschreiben.

bind:     einfach durch on ersetzen
delegate: einfach durch on ersetzen; 1. und 2. Argument vertauschen
live:     selektor durch $(document) ersetzen und den ehemaligen Selektor als 2. Argument einfügen

[Matthias Apsel]

Om nah hoo pez nyeetz, molily!

Ich habe dies in die FAQ des Wikis eingefügt. Vielleicht kannst du ja mal drüberschauen.

Matthias