Zdarzenie kliknięcia JQuery nie działa po metodzie append

Mam więc ten przycisk, który dodaje nowy wiersz do tabeli, jednak moim problemem jest to, że nie nasłuchuje on .new_participant_formjuż zdarzenia kliknięcia po wykonaniu metody append.

http://jsfiddle.net/cTEFG/

Kliknij opcję Dodaj nowy wpis, a następnie kliknij nazwę formularza.

$('#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> 

Użyj na :

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

Aby kliknięcie było delegowane do dowolnego elementu w #registered_participantsklasie new_participant_form, nawet jeśli zostało dodane po powiązaniu obsługi zdarzeń.

.on()Metoda jest używana do przekazania zdarzenia do elementów, dodawane dynamicznie lub już obecnymi w 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>

Czytaj więcej: http://api.jquery.com/on/

Ten problem można rozwiązać, jak wspomniano, przy użyciu wersji .onw jQuery 1.7+.

Niestety to nie zadziałało w moim kodzie (a mam 1.11), więc użyłem:

$('body').delegate('.logout-link','click',function() {

http://api.jquery.com/delegate/

Od wersji jQuery 3.0 .delegate () jest przestarzała. Została zastąpiona przez metodę .on () od wersji 1.7 jQuery, więc jej używanie było już odradzane. Jednak we wcześniejszych wersjach nadal najskuteczniejszym sposobem korzystania z delegowania zdarzeń. Więcej informacji na temat wiązania zdarzeń i delegowania znajduje się w metodzie .on (). Ogólnie są to równoważne szablony dla dwóch metod:

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

Ten komentarz może pomóc innym :)!

** Problem rozwiązany ** // Zmieniono metodę delegate () na delegację z treści

$("body").delegate("#boundOnPageLoaded", "click", function(){
   alert("Delegated Button Clicked")
});

SPRÓBUJ TEGO

Począwszy od wersji jQuery 1.7+, metoda on () jest nowym zamiennikiem metod bind (), live () i delegate ().

WIĘC DODAJ TO,

$(document).on("click", "a.new_participant_form" , function() {
      console.log('clicked');
});

Lub po więcej informacji ZOBACZ TUTAJ