試圖從附加HTML

Question

我使用追加一些行添加到表的onclick火災事件，在所附行有需要火上點擊事件的元素的列，附加：

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

這個代碼後Immidiately：現在

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

，一旦用新的ro完全更新UI ws，你正在設置點擊事件。

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