Jquery click event not working after append method

Question

So I have this button which adds a new row to the table, however my problem is that it does not listen to the .new_participant_form click event anymore after the append method has taken place.

http://jsfiddle.net/cTEFG/

Click Add New Entry then click on the Form name.

$('#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('<tr><td><a href="#" class="new_participant_form">Participant Registration</a></td><td>'+first_name+ ' '+last_name+'</td><td>'+role+'</td><td>0% done</td></tr>');      });      $('.new_participant_form').click(function() {          var $td = $(this).closest('tr').children('td');          var part_name = $td.eq(1).text();         alert(part_name);      }); }); 

HTML

<table id="registered_participants" class="tablesorter">  <thead> <tr>  <th>Form</th> <th>Name</th> <th>Role</th> <th>Progress </th>   </tr>  </thead>   <tbody> <tr>  <td><a href="#" class="new_participant_form">Participant Registration</a></td> <td>Smith Johnson</td> <td>Parent</td> <td>60% done</td>   </tr>  </tbody>  </table>  <button id="add_new_participant"></span>Add New Entry</button>  

Answer 1

Use on :

$('#registered_participants').on('click', '.new_participant_form', function() { 

So that the click is delegated to any element in #registered_participants having the class new_participant_form, even if it's added after you bound the event handler.

Answer 2

The .on() method is used to delegate events to elements, dynamically added or already present in the DOM:

// STATIC-PARENT              on  EVENT    DYNAMIC-CHILD  $('#registered_participants').on('click', '.new_participant_form', function() {      var $td = $(this).closest('tr').find('td');    var part_name = $td.eq(1).text();    console.log( part_name );    });      $('#add_new_participant').click(function() {      var first_name = $.trim( $('#f_name_participant').val() );    var last_name  = $.trim( $('#l_name_participant').val() );    var role       = $('#new_participant_role').val();    var email      = $('#email_participant').val();        if(!first_name && !last_name) return;      $('#registered_participants').append('<tr><td><a href="#" class="new_participant_form">Participant Registration</a></td><td>' + first_name + ' ' + last_name + '</td><td>' + role + '</td><td>0% done</td></tr>');    });

<table id="registered_participants" class="tablesorter">    <thead>      <tr>        <th>Form</th>        <th>Name</th>        <th>Role</th>        <th>Progress </th>      </tr>    </thead>    <tbody>      <tr>        <td><a href="#" class="new_participant_form">Participant Registration</a></td>        <td>Smith Johnson</td>        <td>Parent</td>        <td>60% done</td>      </tr>    </tbody>  </table>    <input type="text" id="f_name_participant" placeholder="Name">  <input type="text" id="l_name_participant" placeholder="Surname">  <select id="new_participant_role">    <option>Parent</option>    <option>Child</option>  </select>  <button id="add_new_participant">Add New Entry</button>    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Read more: http://api.jquery.com/on/