How to get click event on a new created row with Jquery : <p>I have a <code>table</code> :</p>

<pre><code>&lt;table id="myTable" style="cursor :pointer;"&gt;
 &lt;tr&gt;
   &lt;td&gt;col 1&lt;/td&gt;&lt;td&gt;col2&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
   &lt;td&gt;field&lt;/td&gt;&lt;td&gt;Field 2&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
   &lt;td&gt;another field&lt;/td&gt;&lt;td&gt;one more field&lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>when I click on a <code>row</code> this code add a new <code>row</code> :</p>

<pre><code>$("#myTable tr").click(function(){
   $(this).addClass('selected').siblings().removeClass('selected');
   var value=$(this).find('td:eq(1)').html();
   if (value) {
   alert('adding New Row !')
   $('#myTable').find('tbody:last').append('&lt;tr&gt;&lt;td&gt;new Field&lt;/td&gt;&lt;td&gt;New Field&lt;/td&gt;&lt;/tr&gt;');
    }
});
</code></pre>

<p><a href="https://jsfiddle.net/s0h9mwms/" rel="nofollow noreferrer">JSFiddle Demo</a></p>

<p>But now when I click on the new created <code>row</code> nothing append.
Why another <code>row</code>is not created ?</p>

<p>Is there a way to do that ?</p>
