javascript - 使用 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>

这是工作 fiddle

Answer 1

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

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

引用更新fiddle