Question

我使用append向表中添加一些行，附加的行有一个列，其中包含需要触发on click事件的元素，附加：

$.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>");
});

我用来尝试触发事件的代码是：

$(".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;
});

应该删除点击图标上的行。

Answer 1

<强> Working fiddle

由于您的按钮是动态添加的，因此您必须使用事件委派on()将事件附加到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"}];

$.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>");
});

$('body').on('click', ".deleteLink", function() {
  var tr = $(this).closest('tr');
  tr.css("background-color","#FF3700");
  tr.fadeOut(400, function(){
    tr.remove();
  });
  return false;
});

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="modal-table">
  <tbody></tbody>
</table>

Answer 2

不是更好的解决方案，而是一种解决方法尝试放置此代码，

    $(".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>");
    });

现在，使用新行完全更新UI后，您将设置click事件。

Answer 3

你可以试试这个：

$.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;
} ;

尝试从附加的html触发事件onclick

3 个答案: