Sự kiện nhấp chuột truy vấn không hoạt động sau khi phương thức nối thêm

Vì vậy, tôi có nút này để thêm một hàng mới vào bảng, tuy nhiên vấn đề của tôi là nó không lắng nghe .new_participant_formsự kiện nhấp chuột nữa sau khi phương thức nối thêm diễn ra.

http://jsfiddle.net/cTEFG/

Nhấp vào Thêm mục nhập mới sau đó nhấp vào tên biểu mẫu.

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

Sử dụng trên :

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

Vì vậy, nhấp chuột được ủy quyền cho bất kỳ phần tử nào #registered_participantscó lớp new_participant_form, ngay cả khi nó được thêm vào sau khi bạn ràng buộc trình xử lý sự kiện.

Các .on()phương pháp được sử dụng để giao phó các sự kiện để các yếu tố, động thêm hoặc đã có trong 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>

Đọc thêm: http://api.jquery.com/on/

Vấn đề này có thể được giải quyết như đã đề cập bằng cách sử dụng các .onphiên bản jQuery 1.7+ trên.

Thật không may, điều này không hoạt động trong mã của tôi (và tôi có 1.11) nên tôi đã sử dụng:

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

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

Kể từ jQuery 3.0, .delegate () không được dùng nữa. Nó đã được thay thế bởi phương thức .on () kể từ jQuery 1.7, vì vậy việc sử dụng nó đã không được khuyến khích. Tuy nhiên, đối với các phiên bản trước đó, nó vẫn là phương tiện hiệu quả nhất để sử dụng ủy quyền sự kiện. Thông tin thêm về ràng buộc sự kiện và ủy quyền có trong phương thức .on (). Nói chung, đây là các mẫu tương đương cho hai phương pháp:

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

Bình luận này có thể giúp ích cho những người khác :)!

THỬ ĐI

Kể từ phiên bản jQuery 1.7+, phương thức on () là phương thức thay thế mới cho các phương thức bind (), live () và ủy nhiệm ().

VẬY THÊM ĐIỀU NÀY,

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

Hoặc để biết thêm thông tin KIỂM TRA TẠI ĐÂY

** Vấn đề đã được giải quyết ** // Đã thay đổi thành phương thức ủy quyền () để sử dụng ủy quyền từ phần thân

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