Event Delegation

[heinetz]

Hallo Forum,

ich tuh mich immernoch schwer damit. Ich versuche mich gerade mit jQuery mobile und vielleicht ist meine Frage deshalb zu speziell, vielleicht lässt sie sich aber auch unabhängig davon beantworten.

$(document).ready(function(){  
 $('a').on('click', function(){  
  console.log("Ich bin ein Link und wurde eben geklickt");  
 });  
});

... bedeutet soviel wie, für alle 'a'-Tags, die nach dem vollständigen Laden des DOM (ready()) im document vorhanden sind, wird ein Event-Handler definiert.

$(document).ready(function(){  
 $(document).on('click', 'a', function(){  
  console.log("Ich bin ein Link und wurde eben geklickt");  
 });  
});

... bedeutet soviel wie, für alle 'a'-Tags, die nach dem vollständigen Laden des DOM (ready()) im document vorhanden sind UND alle die später durch DOM-Manipulation hinzukommen, wird ein Event-Handler definiert.

ist das korrekt? Und noch einen:

$(document).ready(function(){  
 $('#container').on('click', 'a', function(){  
  console.log("Ich bin ein Link und wurde eben geklickt");  
 });  
});

... bedeutet soviel wie, für alle 'a'-Tags, die nach dem vollständigen Laden des DOM (ready()) im element #container vorhanden sind UND alle die später durch DOM-Manipulation hinzukommen, wird ein Event-Handler definiert.

danke für Hinweise,

...die zur Ergreifung der Täter führen
Konrad Tönz

[molily]

Hallo,

Ja, richtig. :)

Nur eines: Event-Delegation definiert eben keine Event-Handler direkt bei den a-Elementen, sondern nur einmal bei dem angegebenen Elternelement. Deswegen ist es unwichtig, ob diese Elemente in dem Moment schon existieren oder nicht. Es muss daher nicht das Hinzufügen von Elementen überwacht werden.

Im Falle von $(document).on('click', 'selektor', handler); ist es übrigens unnötig, auf Document-Ready zu warten. Das document-Objekt existiert ja schon und man kann dort Event-Handler registrieren, auch wenn der Rest des Dokuments noch nicht geladen ist.

Grüße,
Mathias