title: Binding Click events for Dynamically added Table Rows in Javascript/jQuery
body: <p>Problem Statement:<br />
  I have a table with <code>thead</code> created statically, and 'tr/td' inside the <code>tbody</code> created dynamically. What I have to achieve is that when the user clicks anywhere on the table, I need to get the <code>val()</code> of the first column of the row which was clicked.</p>
  <p>To test this I am binding a click event using <code>on</code> to the parent element class, i.e. class for <code>tbody</code>. And, I am trying to update the text in the First column <code>td:first</code> of the clicked row, e.g. <code>clicked</code>.</p>
  <p>However, somehow the events are not being caught. Here is the extract from the <a href="http://jsfiddle.net/4cd68m40/2/" rel="nofollow noreferrer">JSfiddle</a>.</p>
  <p>HTML:</p>
  <pre><code>&lt;table class=&quot;table&quot; id=&quot;table-id&quot;&gt;
      &lt;thead&gt;
          &lt;tr class=&quot;table-header&quot;&gt;
              &lt;th class=&quot;edit&quot;&gt;Edit&lt;/th&gt;
              &lt;th class=&quot;name&quot;&gt;Name&lt;/th&gt;
              &lt;th class=&quot;status&quot;&gt;Status&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class=&quot;table-body&quot; id=&quot;table-body-id&quot;&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p>TABLE CREATION</p>
  <pre><code>var container = $('.table-body');
  ['A', 'B'].forEach(function(index){
      $('&lt;tr&gt;', {class: 'table-row', id: 'table-row-id-'+index}).appendTo(container);
      $('&lt;td /&gt;', {class: 'edit', id: 'edit-id-'+index, value: index}).appendTo(container);
      $('&lt;td /&gt;', {class: 'name', id: 'name-id-'+index, text: 'Mr. '+index}).appendTo(container);
      $('&lt;td /&gt;', {class: 'status', id: 'status-'+index, text: 'MSc'}).appendTo(container);
      $('&lt;/tr&gt;').appendTo(container);
  });
  </code></pre>
  <p>BINDING CLICK EVENT</p>
  <pre><code>$(&quot;#table-body-id&quot;).on(&quot;click&quot;, &quot;tr&quot;, function(){
      alert($(this).find('td:first').val());
      $(this).find('td:first').text('clicked');
  });
  </code></pre>
  <p>I have looked at plethora of threads on stack-overflow and after that I wrote the above code. One <a href="http://jsfiddle.net/4wa5kfpz/1/" rel="nofollow noreferrer">working JS-Fiddle example</a>.</p>
  <p>However, it is not working for the code that I have written above. Could somehow please point me out as to why is not working and how to fix it?</p>