无法使用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();
 });

对动态创建的元素使用事件委托方法.

演示:

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