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

I am using append to add some rows to a table, the appended rows have a column with a element that needs to fire a on click event, appending:

我正在使用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>");
});

The code I am using to try to fire the event is:

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

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

It should delete the row on the clicked icon.

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

3 个解决方案

#1

Working fiddle.

工作小提琴。

Because your button is added dynamically you've to use event delegation on() that attach event to fresh DOM added by javascript :

因为您的按钮是动态添加的，所以您必须在（）上使用事件委托将事件附加到javascript添加的新DOM：

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

Hope this helps.

希望这可以帮助。

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>

#2

Not a better solution, but a workaround Try placing this code,

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

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

Immidiately after this code:

在此代码之后立即：

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

Now, Once the UI is compltely updated with new rows, you are setting the click event.

现在，一旦使用新行完全更新UI，您就可以设置click事件。

#3

You can try this :

你可以试试这个：

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

#1