行删除不起作用

Vasantha raj

在我的代码中删除适用于第一行,但随后的行不起作用

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

小提琴链接:http : //jsfiddle.net/vasantharaj/vkfr2fbo/1/

萨帕尔

在动态创建元素时。您需要使用.on()委托事件方法来使用事件委托。

使用

$('.table tbody').on('click', 'span.glyphicon-trash', function() {
    $(this).closest('tr').remove();
});

演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章