Jquery click event not working after append method
html, jquery
Solution
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.
Problem
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> ```