Question

我使用jquery添加新行以及删除行。添加部分有效，但删除根本不起作用，我无法弄清楚原因。这将是第一次工作，其余的时间它不起作用。具体来说，它唯一可行的时间是我点击第一行的删除。

HTML

<table class="table table-striped table-bordered" id="entryTable">  
            <thead> ...
            </thead> 
            <tbody>
                <tr>
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                    <td><a href="#" id="addRow">Add</a><br>
                        <a href="#" id="deleteRow">Delete</a>
                    </td>
                </tr>
            </tbody>
        </table>

Jquery的

var i = 1;
    $("#addRow").click(function(){

        $("table tr:last").clone().find("input, select, textarea").each(function(){
            $(this).val('').attr({
                'id': function(_,id){ return id+i},
                'name': function(_,name){ return name+i},
                'value':''
            });
        }).end().appendTo("table");
        i++;
    });

    $("#deleteRow").click(function(){
        alert("delete clicked")
        $(this).parent().parent().remove();
    });

我已尝试将$(this).parent().parent().remove();更改为$(this).closest("tr").remove();，但这也不起作用。

我也试过像<a href="#" onclick="deleteRow(this)">这样做并声明一个函数deleteRow，但它也没有帮助。

肯定会感谢这里的帮助或指示。谢谢。

Answer 1

 $(document).on('click', '#deleteRow', function(){
        alert("delete clicked")
        $(this).parent().parent().remove();
 });

对动态创建的元素使用事件委派方法。

演示：

http://jsfiddle.net/92xVZ/1/

Answer 2

试试这个：

$(function () {
    $(document).on('click', '#deleteRow', function(e){
        $(this).closest('tr').remove();
        e.stopPropagation();
    });
});

无法使用jquery从html表中删除行

2 个答案: