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

因此，我有一个按钮，它将一个新行添加到表中，但是我的问题是，在append方法发生后，它不再侦听

.new\u participant\u form

click事件

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

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

    });
});

$（“#添加新参与者”）。单击（函数（）{
var first_name=$（'f#u name_participant'）.val（）；
var last_name=$（'l#u name_participant'）.val（）；
var role=$（“#新参与者_角色选项：选定”）.text（）；
var email=$（“#email_参与者”）.val（）；
$（“#注册的#U参与者”）。追加（“”+名字+“”+姓氏+“”+角色+“0%完成”）；
});
$（'.new_participant_form'）。单击（函数（）{
var$td=$（this）.closest（'tr'）。children（'td'）；
var part_name=$td.eq（1.text（）；
警报（部件名称）；
});
});

HTML

形式
名称
角色
进展
史密斯·约翰逊
父母亲
60%完成
添加新条目

使用：

这样，即使是在绑定事件处理程序后添加的，单击也会被委托给

#registered_participants

中具有类

new_participant_表单

的任何元素。

用于将事件委托给动态添加或已存在于DOM中的元素：

//事件上的STATIC-PARENT-DYNAMIC-CHILD
$（“#已注册参与者”）。在（'单击'，'上。新建参与者表格'，函数（）{
var$td=$（this）.closest（'tr'）。find（'td'）；
var part_name=$td.eq（1.text（）；
控制台日志（部件名称）；
});
$（“#添加新参与者”）。单击（函数（）{
var first_name=$.trim（$（'f#u name_participant'）.val（））；
var last_name=$.trim（$（'l_name_participant'）.val（））；
var role=$（“#新参与者_role”）.val（）；
var email=$（“#email_参与者”）.val（）；
如果（！first_name&&！last_name）返回；
$（“#注册的#U参与者”）。追加（“”+名字+“”+姓氏+“”+角色+“0%完成”）；
});

形式
名称
角色
进展
史密斯·约翰逊
父母亲
60%完成
父母亲
小孩
添加新条目
这个问题可以通过使用jQuery 1.7+版本上的
解决

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

$（'body'）.delegate（'logout link'，'click'，function（）{


从jQuery 3.0开始，.delegate（）已被弃用。它已被取代
从jQuery 1.7开始使用.on（）方法，因此它的使用已经停止
不鼓励。但是，对于早期版本，它仍然是最受欢迎的
使用事件委派的有效方法。有关事件的更多信息
绑定和委派在.on（）方法中
两种方法的等效模板：

此评论可能对其他人有所帮助：）！
**以下是可能对您有所帮助的解决方案**

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

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

试试这个

从jQuery版本1.7+开始，on（）方法是bind（）、live（）和delegate（）方法的新替代方法

那么加上这个,

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

或者更多信息
问题在于，事件仅附加到文档中已有的
新参与者表单
元素。要使其适用于稍后添加的元素，您可以使用事件委派，如dystroy所示，或者在插入每个锚之前将处理程序附加到每个锚（前者效率更高）。如果使用
$（document）。在（'click'，'new_participant_form'，function（）{}）上
？@basZero有一个，因为jQuery必须处理所有的点击，而不仅仅是
注册的参与者
上的点击，但公平地说，这个减速太小了，不重要。最好针对正确的元素，因为它更干净。我可以在新附加的元素上使用相同的类名吗？委托（）方法在3.0版中已被弃用。因此请改用on（）方法。
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

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

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

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