Ekleme yönteminden sonra Jquery tıklama olayı çalışmıyor

Bu yüzden tabloya yeni bir satır ekleyen bu düğmeye sahibim, ancak benim sorunum, .new_participant_formekleme yöntemi gerçekleştikten sonra artık tıklama olayını dinlemiyor .

http://jsfiddle.net/cTEFG/

Yeni Giriş Ekle'yi ve ardından Form adını tıklayın.

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

Kullanım ile ilgili :

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

Böylece tıklama, olay işleyicisini bağladıktan sonra eklense bile #registered_participantssınıfa sahip olan herhangi bir öğeye delege edilir new_participant_form.

.on()Yöntem elemanları, dinamik olarak eklenen ya da DOM zaten mevcut olayları temsilci için kullanılır:

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

Daha fazlasını okuyun: http://api.jquery.com/on/

Bu sorun .on, jQuery 1.7+ sürümleri kullanılarak belirtildiği gibi çözülebilir .

Ne yazık ki, bu kodum içinde çalışmadı (ve benim 1.11 var) bu yüzden kullandım:

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

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

JQuery 3.0'dan itibaren .delegate () kullanımdan kaldırılmıştır. JQuery 1.7'den beri .on () yöntemi ile değiştirildi, bu nedenle kullanımı zaten tavsiye edilmedi. Bununla birlikte, önceki sürümler için, olay yetkilendirmesini kullanmanın en etkili yolu olmaya devam etmektedir. Olay bağlama ve yetkilendirme hakkında daha fazla bilgi .on () yöntemindedir. Genel olarak, bunlar iki yöntem için eşdeğer şablonlardır:

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

Bu yorum başkalarına yardımcı olabilir :)!

** Sorun Çözüldü ** // Vücuttan yetkilendirmeyi kullanmak için delegate () yöntemine değiştirildi

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

BUNU DENE

JQuery 1.7+ sürümünden itibaren, on () yöntemi, bind (), live () ve delegate () yöntemlerinin yeni yerine geçer.

BUNU EKLE,

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

Veya daha fazla bilgi için BURAYA KONTROL EDİN