通过 Jquery 复制和删除表行

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 在它们上绑定事件。