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

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

对动态创建的元素使用事件委托(delegate)方法。

演示:

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