在我的代码中,删除第一行有效,但后续行无效
html代码:
<table class="table table-striped table-bordered table-hover table-condensed tableSiteUser">
<thead>
<tr>
<th>#</th>
<th>User</th>
<th>Channel</th>
<th>Action</th>
</tr>
<tr>
<td contentEditable="true">1</td>
<td contentEditable="true">www.google.com</td>
<td contentEditable="true">channel-1</td>
<td contentEditable="true"><span class="glyphicon glyphicon-trash form-control row-remover">delete</span>
</td>
</tr>
</thead>
<tbody id="site-table-body"></tbody>
</table>
javascript代码:
$('.table tbody').append('<tr><td contenteditable="true">1</td><td contenteditable="true">1</td><td contenteditable="true">1</td><td contenteditable="true"><span class="glyphicon glyphicon-trash form-control row-remover">del</span></td></tr>');
$('.table').on('keydown', 'td:last-child', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
$('tbody').append('<tr><td contenteditable="true">2</td><td contenteditable="true">2</td><td contenteditable="true">2</td><td contenteditable="true"><span class="glyphicon glyphicon-trash form-control row-remover">del</span></td></tr>');
}
});
$('span.glyphicon-trash').on('click', function () {
$(this).closest('tr').remove();
});
最佳答案
当您动态创建元素时。您需要使用 Event Delegation使用 .on()委托(delegate)事件方法。
使用
$('.table tbody').on('click', 'span.glyphicon-trash', function() {
$(this).closest('tr').remove();
});
关于javascript - 行删除不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30389565/