使用jQuery从表中添加，删除行

Question

根据我的代码，我有2个表。 单击“添加”时，整行将追加到下一个表，单击“删除”将其追加到第一个表。

我编写的代码可以正常工作，但是在添加所有行或删除所有行多次时出现奇怪的错误，因为它将停止工作。 我无法解决问题。

 $(".addRow").on("click", function() { var $delete = '<h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>'; var $clone = $(this).parent().parent(); $clone.find(".addRow").remove(); $clone.find("td:eq(0)").append($delete); $(".selected table").append($clone); $(".deleteRow").on("click", function() { var $add = '<h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>'; var newClone = $(this).parent().parent(); newClone.find(".deleteRow").remove(); newClone.find("td:eq(0)").append($add); $(".available table").append(newClone); }); }); $(".deleteRow").on("click", function() { var $add = '<h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>'; var newClone = $(this).parent().parent(); newClone.find(".deleteRow").remove(); newClone.find("td:eq(0)").append($add); $(".available table").append(newClone); $(".addRow").on("click", function() { var $delete = '<h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>'; var $clone = $(this).parent().parent(); $clone.find(".addRow").remove(); $clone.find("td:eq(0)").append($delete); $(".selected table").append($clone); }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-lg-4 col-md-4 col-lg-offset-2 col-md-offset-2 available"> <label>Available Members</label> <table class="table table-bordered"> <tbody> <tr> <td> <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4> </td> <td> <h6>Cab Swift Two</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4> </td> <td> <h6>Dharma</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4> </td> <td> <h6>Sahoo</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4> </td> <td> <h6>Majhi</h6> </td> </tr> </tbody> </table> </div> <div class="col-lg-4 col-md-4 selected"> <label>Selected Members</label> <table class="table table-bordered"> <tbody> <tr> <td> <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4> </td> <td> <h6>Shantanu</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4> </td> <td> <h6>Android</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4> </td> <td> <h6>ios</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4> </td> <td> <h6>Windows</h6> </td> </tr> </tbody> </table> </div> </div> 

这是工作的小提琴

Answer 1

将事件绑定到文档而不是表行，因为在删除元素之后，绑定事件也会被删除。

$(document).on('click','.addRow'

参考更新的小提琴

Answer 2

问题是因为您正在动态修改元素，所以您需要使用委托事件处理程序来绑定其事件：

$('.row').on('click', '.addRow', fn);
$('.row').on('click', '.deleteRow', fn);

尝试这个：

 $(".row").on("click", '.addRow', function() { var $delete = '<h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>'; var $clone = $(this).parent().parent(); $clone.find(".addRow").remove(); $clone.find("td:eq(0)").append($delete); $(".selected table").append($clone); $(".deleteRow").on("click", function() { var $add = '<h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>'; var newClone = $(this).parent().parent(); newClone.find(".deleteRow").remove(); newClone.find("td:eq(0)").append($add); $(".available table").append(newClone); }); }); $(".row").on("click", '.deleteRow', function() { var $add = '<h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>'; var newClone = $(this).parent().parent(); newClone.find(".deleteRow").remove(); newClone.find("td:eq(0)").append($add); $(".available table").append(newClone); $(".addRow").on("click", function() { var $delete = '<h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>'; var $clone = $(this).parent().parent(); $clone.find(".addRow").remove(); $clone.find("td:eq(0)").append($delete); $(".selected table").append($clone); }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-lg-4 col-md-4 col-lg-offset-2 col-md-offset-2 available"> <label>Available Members</label> <table class="table table-bordered"> <tbody> <tr> <td> <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4> </td> <td> <h6>Cab Swift Two</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4> </td> <td> <h6>Dharma</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4> </td> <td> <h6>Sahoo</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4> </td> <td> <h6>Majhi</h6> </td> </tr> </tbody> </table> </div> <div class="col-lg-4 col-md-4 selected"> <label>Selected Members</label> <table class="table table-bordered"> <tbody> <tr> <td> <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4> </td> <td> <h6>Shantanu</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4> </td> <td> <h6>Android</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4> </td> <td> <h6>ios</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4> </td> <td> <h6>Windows</h6> </td> </tr> </tbody> </table> </div> </div>