jQuery 追加方法后Jquery单击事件不起作用

Jquery click event not working after append method

提问by Edward

So I have this button which adds a new row to the table, however my problem is that it does not listen to the .new_participant_formclick event anymore after the append method has taken place.

所以我有这个按钮，它向表中添加了一个新行，但是我的问题是它.new_participant_form在 append 方法发生后不再监听click 事件。

http://jsfiddle.net/cTEFG/

http://jsfiddle.net/cTEFG/

Click Add New Entry then click on the Form name.

单击添加新条目，然后单击表单名称。

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

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> 

回答by Denys Séguret

Use on:

使用上：

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

So that the click is delegated to any element in #registered_participantshaving the class new_participant_form, even if it's added after you bound the event handler.

以便将单击委托给#registered_participants具有 class 的任何元素new_participant_form，即使它是在您绑定事件处理程序之后添加的。

回答by Roko C. Buljan

The .on()methodis used to delegate events to elements, dynamically added or already present in the DOM:

该.on()方法用于将事件委托给动态添加或已存在于 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>

Read more: http://api.jquery.com/on/

阅读更多：http: //api.jquery.com/on/

回答by Rick Sanchez

This problem could be solved as mentioned using the .onon jQuery 1.7+ versions.

使用.onjQuery 1.7+ 版本可以解决这个问题。

Unfortunately, this didn't work within my code (and I have 1.11) so I used:

不幸的是，这在我的代码中不起作用（我有 1.11）所以我使用了：

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

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

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

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

As of jQuery 3.0, .delegate() has been deprecated. It was superseded by the .on() method since jQuery 1.7, so its use was already discouraged. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the .on() method. In general, these are the equivalent templates for the two methods:

从 jQuery 3.0 开始，.delegate() 已被弃用。自 jQuery 1.7 起，它被 .on() 方法取代，因此已经不鼓励使用它。然而，对于早期版本，它仍然是使用事件委托的最有效方法。更多关于事件绑定和委托的信息在 .on() 方法中。通常，这些是两种方法的等效模板：

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

This comment might help others :) !

此评论可能对其他人有帮助:)！

回答by Manoj

TRY THIS

尝试这个

As of jQuery version 1.7+, the on() method is the new replacement for the bind(), live() and delegate() methods.

从 jQuery 1.7+ 版本开始， on() 方法是 bind()、live() 和 delegate() 方法的新替代品。

SO ADD THIS,

所以添加这个，

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

Or for more information CHECK HERE

或欲了解更多信息，请点击此处

回答by Ashwani Garg

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

** 问题已解决 ** // 改为delegate() 方法以使用来自主体的委托

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