Jquery click event not working after append method
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.
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/
This problem could be solved as mentioned using the .on on jQuery 1.7+ versions.
Unfortunately, this didn't work within my code (and I have 1.11) so I used:
$('body').delegate('.logout-link','click',function() {
http://api.jquery.com/delegate/
As of jQuery 3.0, .delegate() has been deprecated. It was superseded by the .on() method since jQuery 1.7, so its use was already discouraged. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the .on() method. In general, these are the equivalent templates for the two methods:
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );
This comment might help others :) !