.on ("click", ...) funktioniert nicht auf Objekte mit der gleichen auf Klick-Funktion erstellt

Question

seit ich neu in JS/jQuery bin es wahrscheinlich ein offensichtliches Problem (aber keine Ausnahme geworfen). Ich lese, dass ich .onclick nicht verwenden kann, also versuchte ich diesen Ansatz mit .on ("klick" ...)

Ich versuche, eine Tabelle zu erstellen, die neue Zeilen unter der angeklickte Zeile hinzufügt. Dies sollte auch für die neu erstellten Zeilen funktionieren.

Mein html:

<tbody> 
    <tr id="line1"><td>Stuff1</td><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr> 
    <tr id="line2"><td>Stuff2</td><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr> 
    <tr id="line3"><td>Stuff3</td><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr> 
    <tr id="line4"><td>Stuff4</td><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr> 
</tbody> 

Mein JS:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

<script>  

    $(document).ready(function(){ 
     $("tr").on("click",function(){ 
      var childId = $(this).attr("id")+1; 
      if($("#"+childId).length){ 
       $("#"+childId).toggle(); 
      }else{ 
       $(this).after('<tr id="'+childId+'"><td>Stuffxxxx</td><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>'); 
       //AJAX 
      } 
     }); 
    }); 
</script> 

Vielen Dank für Ihre Hilfe! :)

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

<script>  

    $(document).ready(function(){ 
     $("table").on("click","tr", function(){ 
      var childId = $(this).attr("id")+1; 
      if($("#"+childId).length){ 
       $("#"+childId).toggle(); 
      }else{ 
       $(this).after('<tr id="'+childId+'"><td>Stuffxxxx</td><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>'); 
       //AJAX 
      } 
     }); 
    }); 
</script>