Question

所以我设法使它能够通过单击每个表行上的图标来添加和删除表行。

我的问题是，假设您添加两（2）行然后删除一行（1）然后改变主意并再次向表中添加一（1）行。好吧，而不是得到一（1）行你得到两（2）。出于某种原因，jQuery会将您删除的第一行加上刚刚请求的新行。

我打开了Google Chrome Inspector并确实看到如果您删除该行，它实际上会从标记中消失，但在添加新标记时仍然会恢复。

我的桌子布局如下：

<table class="table taskTable" style="text-align:center;">
<thead>
    <tr>
        <th>Task Name</th>

        <th>Est. Task Completion</th>

        <th>Est. Task Hours</th>

        <th>&nbsp;</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td><input class="form-control" name="task_name[]" type="text"
        value=""></td>

        <td><input class="form-control" name="task_done[]" type="text"
        value=""></td>

        <td><input class="form-control" name="task_hour[]" type="text"
        value=""></td>

        <td style="vertical-align:middle; text-align:center;">
            <a class="removeTaskRow fa fa-trash-o" href="#" style=
            "color: #d9534f; font-style: italic; margin-right: 10px" title=
            "Remove Task"></a> <a class="addTaskRow fa fa-plus" href="#"
            style="color: #5cb85c; font-style: italic" title=
            "New Task"></a>
        </td>
    </tr>
</tbody>

然后，我有以下Javascript用于添加和删除表行。

$(".addTaskRow").click(function(){
    addTableRow($('.taskTable tbody'));
});

function addTaskRow(){
    addTableRow($('.taskTable tbody'));
}

function removeTaskRow(){ 
    var par = $(this).parent().parent(); 
    par.remove(); 
};

function addTableRow(table){
    $(table).append(
        "<tr>"+
        "<td><input type='text' class='form-control' /></td>"+
        "<td><input type='text' class='form-control' /></td>"+
        "<td><input type='text' class='form-control' /></td>"+
        "<td style='vertical-align:middle; text-align:center;'><a href='#' style='margin-right: 10px; color: #d9534f' class='removeTaskRow' title='Remove Task'><i class='fa fa-trash-o'></i></a><a href='#' style='color: #5cb85c;' class='addTaskRow' title='New Task'><i class='fa fa-plus'></i></a></td>"+
        "</tr>"
    );

    $(".addTaskRow").bind("click", addTaskRow);
    $(".removeTaskRow").bind("click", removeTaskRow);
}

为什么jQuery会在添加新行时恢复以前删除的行？

我为你创建了一个JSFiddle，看看我到底在说些什么。尝试创建一些新行，删除一些，然后再添加一些。 JSFiddle：http://jsfiddle.net/8sj7n1h1/

Answer 1

正在动态创建元素。

您需要使用Event Delegation。您必须使用委托事件方法来使用.on()。

使用

$('.taskTable tbody').on("click", ".addTaskRow", addTaskRow);
$('.taskTable tbody').on("click", ".removeTaskRow", removeTaskRow);

另外，将这些方法移到addTableRow方法

之外

DEMO

Answer 2

您的元素是动态生成的。和.bind()文档说：

处理程序附加到jQuery中当前选定的元素对象，所以这些元素必须存在于.bind（）的调用点发生。有关更灵活的事件绑定，请参阅事件讨论授权在.on（）或.delegate（）中。：

以下是您需要做的事：http://jsfiddle.net/8sj7n1h1/2/

$(function(){

    $(".taskTable").on("click",".removeTaskRow", removeTaskRow);

    $(".taskTable").on("click",".addTaskRow", addTaskRow);
});
function addTaskRow() {
    addTableRow($('.taskTable tbody'));
}

function removeTaskRow() {
    var par = $(this).parent().parent();
    par.remove();
};

function addTableRow(table) {
    $(table).append(
        "<tr>" +
        "<td><input type='text' class='form-control' /></td>" +
        "<td><input type='text' class='form-control' /></td>" +
        "<td><input type='text' class='form-control' /></td>" +
        "<td style='vertical-align:middle; text-align:center;'><a href='#' style='margin-right: 10px; color: #d9534f' class='removeTaskRow' title='Remove Task'><i class='fa fa-trash-o'></i></a><a href='#' style='color: #5cb85c;' class='addTaskRow' title='New Task'><i class='fa fa-plus'></i></a></td>" +
        "</tr>");
}

使用.on来绑定事件。

通过Jquery复制和删除表行

2 个答案: