onclick auf dynamisch hinzugefügte ID

[Rolf B]

Hallo Pit,

du machst das bitte im konkreten Fall NICHT so. Statt eines span füge einen Button hinzu, mit type="submit".

Wenn #myVan bereits im #formDel Form drin liegt, reicht das schon. Andernfalls musst Du dem Button mit dem form='formDel' Attribut noch sagen, welches Form er submitten soll.

Auf einen Klick-Handler für den Button kannst Du dann verzichten, und wenn Du das Design eines Button nicht willst, dann style den Button so, wie Du das span gestyled hast.

Und - wenn Du keinen bestimmten Grund für deine Schreibweise hast, der aus dem geposteten Code nicht ersichtlich ist - dann kannst Du statt '#myVan' + ' .mybutton' auch kurz '#myVan .mybutton' schreiben.

---

Andererseits ist das Problem, das Du hier hattest, natürlich durchaus häufig. Die ansynchrone Natur von JavaScript hat schon viele in den Wahnsinn getrieben.

Möglichkeit 1: der html() Setter liefert Dir ein Wrapped Set auf den hinzugefügten Span (glaub ich jedenfalls) und damit solltest Du problemlos ein .on('click', ...); hinten anhängen können.

Der Code ist rot, damit jeder, der ihn ggf. kopieren will, sofort sieht dass das für das gewählte Szenario nicht best-practice ist.

$('#myDel').on('click', function() {
      $('#myVan' + ' .myButton')
         .html("<span id='TDel'>Wirklich löschen?<span>")
         .on("click", function() {
            console.log(this.id);
            $("#formDel").submit();
         });
});

Die andere Möglichkeit ist, einfach auf $('myVan') einen Klick-Handler zu legen und ihn dort zu lassen. Die .on() Methode kennt eine Variante mit 3 Parametern, in der der 2. Parameter als Filter dient. Damit kannst Du den Klick-Handler an passender Stelle im DOM verankern, aber nur die Klicks auf die Elemente verarbeiten, die auf deinen Selektor passen.

$('#myDel').on('click', function() {
      $('#myVan .myButton')
         .html("<span id='TDel'>Wirklich löschen?<span>")
});
$('#myVan .myButton').on('click', '#TDel', function() {
   $("#formDel").submit();
});

Rolf