.on("click",...) not working on objects created with the same on click function
<p>since I am new to JS / jQuery it is probably a obvious problem (but no exception thrown). I read that I can't use .onclick so i tried this approach with .on("click"...) </p>

<p>I try to build a table that adds new lines under the clicked line. This should also work for the newly created lines.</p>

<p>My html:</p>

<pre><code>&lt;tbody&gt;
    &lt;tr id="line1"&gt;&lt;td&gt;Stuff1&lt;/td&gt;&lt;td&gt;Stuff&lt;/td&gt;&lt;td&gt;Stuff&lt;/td&gt;&lt;td&gt;Stuff&lt;/td&gt;&lt;td&gt;Stuff&lt;/td&gt;&lt;/tr&gt;
    &lt;tr id="line2"&gt;&lt;td&gt;Stuff2&lt;/td&gt;&lt;td&gt;Stuff&lt;/td&gt;&lt;td&gt;Stuff&lt;/td&gt;&lt;td&gt;Stuff&lt;/td&gt;&lt;td&gt;Stuff&lt;/td&gt;&lt;/tr&gt;
    &lt;tr id="line3"&gt;&lt;td&gt;Stuff3&lt;/td&gt;&lt;td&gt;Stuff&lt;/td&gt;&lt;td&gt;Stuff&lt;/td&gt;&lt;td&gt;Stuff&lt;/td&gt;&lt;td&gt;Stuff&lt;/td&gt;&lt;/tr&gt;
    &lt;tr id="line4"&gt;&lt;td&gt;Stuff4&lt;/td&gt;&lt;td&gt;Stuff&lt;/td&gt;&lt;td&gt;Stuff&lt;/td&gt;&lt;td&gt;Stuff&lt;/td&gt;&lt;td&gt;Stuff&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
</code></pre>

<p>My JS:</p>

<pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;&lt;/script&gt; 

&lt;script&gt;    

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

<p>Thanks for your help! :) </p>