title: Jquery click event not working after append method
body: <p>So I have this button which adds a new row to the table, however my problem is that it does not listen to the <code>.new_participant_form</code> click event anymore after the append method has taken place.</p>
  
  <p><a href="http://jsfiddle.net/cTEFG/">http://jsfiddle.net/cTEFG/</a> </p>
  
  <p>Click Add New Entry then click on the Form name. </p>
  
  <pre><code>$('#add_new_participant').click(function() {
  
  
      var first_name = $('#f_name_participant').val();
      var last_name = $('#l_name_participant').val();
      var role = $('#new_participant_role option:selected').text();
      var email = $('#email_participant').val();
  
  
      $('#registered_participants').append('&lt;tr&gt;&lt;td&gt;&lt;a href="#" class="new_participant_form"&gt;Participant Registration&lt;/a&gt;&lt;/td&gt;&lt;td&gt;'+first_name+ ' '+last_name+'&lt;/td&gt;&lt;td&gt;'+role+'&lt;/td&gt;&lt;td&gt;0% done&lt;/td&gt;&lt;/tr&gt;');
  
      });
  
      $('.new_participant_form').click(function() {
  
          var $td = $(this).closest('tr').children('td');
  
          var part_name = $td.eq(1).text();
          alert(part_name);
  
      });
  });
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;table id="registered_participants" class="tablesorter"&gt;
  
  &lt;thead&gt;
  &lt;tr&gt; 
  &lt;th&gt;Form&lt;/th&gt;
  &lt;th&gt;Name&lt;/th&gt;
  &lt;th&gt;Role&lt;/th&gt;
  &lt;th&gt;Progress &lt;/th&gt;
  
  
  &lt;/tr&gt; 
  &lt;/thead&gt;
  
  
  &lt;tbody&gt;
  &lt;tr&gt; 
  &lt;td&gt;&lt;a href="#" class="new_participant_form"&gt;Participant Registration&lt;/a&gt;&lt;/td&gt;
  &lt;td&gt;Smith Johnson&lt;/td&gt;
  &lt;td&gt;Parent&lt;/td&gt;
  &lt;td&gt;60% done&lt;/td&gt;
  
  
  &lt;/tr&gt; 
  &lt;/tbody&gt;
  
  &lt;/table&gt;
  
  &lt;button id="add_new_participant"&gt;&lt;/span&gt;Add New Entry&lt;/button&gt; 
  </code></pre>