Javascript 试图从附加的html触发事件onclick

我正在使用append将一些行添加到表中，追加的行有一列，其中包含需要触发单击事件的元素，追加：

$.each(person, function(index, value){
     $("#modal-table tbody").append( "<tr>"
     + "<td align='center'><span class='fa fa-minus-circle deleteLink' style='color:red; cursor:pointer;'></span></td>"
     + "<td>"+ value.type+"</td>"
     + "<td>"+ value.hours+"</td>"
     + "<td><input placeholder='comments' class='form-control' type='text'/></td>"
     + "</tr>");
});

它应该删除单击图标上的行。

因为您的按钮是动态添加的，所以您必须对javascript添加的新DOM附加事件使用事件委派：

$('body').on('click', ".deleteLink", function() {
    //Your code here
})

希望这有帮助

var person=[{type:type 1，hours:01:00}，{type:type 2，hours:02:00}，{type:type 3，hours:03:00}]； $.eachperson，函数索引，值{ $modal table tbody.append + ++value.type+ ++value.h+ + + ; }; $'body'。单击时，.deleteLink，函数{ var tr=$this.最近的'tr'； tr.cssbackground-color，FF3700； tr.fadeOut400，功能{ tr.remove； }; 返回false； };

---

这不是一个更好的解决方案，而是一个变通办法 尝试放置此代码

    $(".deleteLink").on('click', function() {
        console.log(1);
        var tr = $(this).closest('tr');
        tr.css("background-color","#FF3700");
        tr.fadeOut(400, function(){
            tr.remove();
        });
        return false;
    });

在此代码之后立即：

    $.each(person, function(index, value){
    $("#modal-table tbody").append( "<tr>"
    + "<td align='center'><span class='fa fa-minus-circle deleteLink' style='color:red; cursor:pointer;'></span></td>"
    + "<td>"+ value.type+"</td>"
    + "<td>"+ value.hours+"</td>"
    + "<td><input placeholder='comments' class='form-control' type='text'/></td>"
    + "</tr>");
    });

现在，一旦用户界面用新行完全更新，您就可以设置单击事件。

您可以尝试以下操作：

$.each(person, function(index, value){
$("#modal-table tbody").append( "<tr>"
+ "<td align='center'><span onclick='executeFunction()' class='fa fa-minus-circle deleteLink'        style='color:red; cursor:pointer;'></span></td>"
+ "<td>"+ value.type+"</td>"
+ "<td>"+ value.hours+"</td>"
+ "<td><input placeholder='comments' class='form-control' type='text'/></td>"
+ "</tr>");
});



function  executeFunction(){
    console.log(1);
    var tr = $(this).closest('tr');
    tr.css("background-color","#FF3700");
    tr.fadeOut(400, function(){
    tr.remove();
});
return false;
} ;

$.each(person, function(index, value){
$("#modal-table tbody").append( "<tr>"
+ "<td align='center'><span onclick='executeFunction()' class='fa fa-minus-circle deleteLink'        style='color:red; cursor:pointer;'></span></td>"
+ "<td>"+ value.type+"</td>"
+ "<td>"+ value.hours+"</td>"
+ "<td><input placeholder='comments' class='form-control' type='text'/></td>"
+ "</tr>");
});



function  executeFunction(){
    console.log(1);
    var tr = $(this).closest('tr');
    tr.css("background-color","#FF3700");
    tr.fadeOut(400, function(){
    tr.remove();
});
return false;
} ;