onclick auf dynamisch hinzugefügte ID

[kackb00n]

Hi, es gibt auch noch eine andere Variante die hier noch nicht erwähnt wurde:

$(document).on("click", "#myDel", function(e) {
  //code
});

Die on-Funktionsparameter sind hier Eventtyp, ein CSS-Selektor für gewollte Elemente und der eigentliche Eventhandler.

Intern passiert folgendes: document bekommt einen Eventhandler von jQuery. Bei jedem Click auf der Seite wird irgendwann (falls nicht durch andere Eventhandler event.stopPropagation() aufgerufen wird) jener Eventhandler ausgeführt. Dieser Eventhandler guckt dann ob das Click-Event von einem Element kommt auf den der CSS-Selektor passt. Wenn ja, wird der obige Eventhandler ausgeführt.

Das hat Vor- und Nachteile, hier mal 2 wichtige: Vorteil: der Eventhandler greift auch bei Elementen die erst später hinzugefügt werden. Nachteil: in diesem Fall wird der jQuery-interne Eventhandler bei jedem Click ausgeführt (es seiden oben erwähntes stopPropagation() wird ausgeführt)

Natürlich gilt das nicht nur für $(document) sondern für alle Elemente. Mal angenommen du hast eine Liste bei der Einträge dynamisch hinzugefügt werden und da je Eintrag auch ein Löschbutton dabei ist:

<ul id="dynamic-entries">
   <li>Eintrag <button class="delete">Löschen</li>
</ul>

Dann kann man an Stelle von document auch gleich auf #dynamic-entries gehen. Das bedeutet dann, dass der jQuery-interne Eventhandler nur aufgerufen wird, wenn auf dieses oder ein Element in #dynamic-entries geclickt und stopPropagation nicht aufgerufen wurde.

Vollständigkeitshalber: Das Ganze ist nicht direkt an jQuery gebunden, das geht auch mit "reinem Javascript". Für mehr Informationen darüber sind gute Stichworte event bubbling und event delegation.

MfG