Jquery-Klickereignis funktioniert nach der Append-Methode nicht

Ich habe also diese Schaltfläche, die der Tabelle eine neue Zeile hinzufügt. Mein Problem ist jedoch, dass .new_participant_formdas Klickereignis nach dem Anhängen nicht mehr abgehört wird.

http://jsfiddle.net/cTEFG/

Klicken Sie auf Neuen Eintrag hinzufügen und dann auf den Formularnamen.

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

Verwendung auf :

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

Damit wird der Klick an ein beliebiges Element in #registered_participantsder Klasse delegiert new_participant_form, auch wenn er hinzugefügt wird, nachdem Sie den Ereignishandler gebunden haben.

Die .on()Methode wird verwendet, um Ereignisse an Elemente zu delegieren, die dynamisch hinzugefügt wurden oder bereits im DOM vorhanden sind:

// 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>

Lesen Sie mehr: http://api.jquery.com/on/

Dieses Problem konnte wie erwähnt mit den .onVersionen unter jQuery 1.7+ gelöst werden .

Leider hat dies in meinem Code nicht funktioniert (und ich habe 1.11), also habe ich verwendet:

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

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

Ab jQuery 3.0 ist .delegate () veraltet. Es wurde seit jQuery 1.7 durch die .on () -Methode ersetzt, sodass von seiner Verwendung bereits abgeraten wurde. Für frühere Versionen bleibt es jedoch das effektivste Mittel, die Ereignisdelegierung zu verwenden. Weitere Informationen zum Binden und Delegieren von Ereignissen finden Sie in der .on () -Methode. Im Allgemeinen sind dies die entsprechenden Vorlagen für die beiden Methoden:

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

Dieser Kommentar könnte anderen helfen :)!

VERSUCHE DIES

Ab jQuery Version 1.7+ ist die on () -Methode der neue Ersatz für die Methoden bind (), live () und delegate ().

SO HINZUFÜGEN,

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

Oder für weitere Informationen HIER PRÜFEN

** Problem gelöst ** // In delegate () -Methode geändert, um die Delegierung vom Hauptteil zu verwenden

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