Jquery单击事件后追加方法不工作 [英] Jquery click event not working after append method

问题描述

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

http://jsfiddle.net/cTEFG/

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

  $（'＃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_pa​​rticipants'）。append（'< tr>< td>< a href =＃class =new_participant_form>参与者注册< / 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_pa​​rticipantsclass =tablesorter> 
 
< thead> 
< tr> 
< th>表格< / th> 
< th>名称< / th> 
< th>角色< / th> 
< th>进度< / th> 
 
 
< / tr> 
< / thead> 
 
 
< tbody> 
< tr> 
< td>< a href =＃class =new_participant_form>参与者注册< / a>< / td> 
< td>史密斯约翰逊< / td> 
< td>父< / td> 
< td>完成60％< / td> 
 
 
< / tr> 
< / tbody> 
 
< / table> 
 
< button id =add_new_participant>< / span>添加新条目< / button> 
  

解决方案

使用 on）：

 点击'，'.new_participant_form'，函数（）{
  

为了将点击委托给任何元素在 #registered_pa​​rticipants 中拥有类 new_participant_form ，即使它在绑定事件处理函数后添加。

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_form click event anymore after the append method has taken place.

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

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

解决方案

Use on :

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

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

这篇关于Jquery单击事件后追加方法不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！