Das Jquery-Klickereignis funktioniert nach der Append-Methode nicht

Also habe ich diese Schaltfläche, die der Tabelle eine neue Zeile hinzufügt, aber mein Problem ist, dass sie nicht auf die hört .new_participant_form Click-Ereignis nicht mehr, nachdem die Append-Methode stattgefunden hat.

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> 

Benutzen an :

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

Damit der Klick an ein beliebiges Element in delegiert wird #registered_participants Klasse haben new_participant_formauch wenn es hinzugefügt wird, nachdem Sie den Ereignishandler gebunden haben.

Der .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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Weiterlesen: http://api.jquery.com/on/

Dieses Problem könnte wie erwähnt mit der gelöst werden .on auf jQuery 1.7+ Versionen.

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

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

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

Ab jQuery 3.0 ist .delegate() veraltet. Sie wurde seit jQuery 1.7 durch die .on()-Methode ersetzt, sodass von ihrer Verwendung bereits abgeraten wurde. Für frühere Versionen bleibt dies jedoch das effektivste Mittel zur Verwendung der Ereignisdelegierung. Weitere Informationen zur Ereignisbindung und -delegierung finden Sie in der Methode .on(). Im Allgemeinen sind dies die äquivalenten 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 bind()-, live()- und Delegate()-Methoden.

Also füge das hinzu,

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

Oder für weitere Informationen ÜBERPRÜFE HIER

** Hier ist die Lösung, die Ihnen helfen könnte **

// Changed to delegate() method to use delegation from the body

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

$(document).on("click", '.mylink', function(event) { 
alert("new link clicked!");});