0

当我尝试删除第一行时，它可以工作，但是当我添加更多行时，我无法删除它们。出于某种原因，我只能删除第一行。

这是我的html

<table class="pretty property_units" style="width:800px;">
<thead>
<tr>
<th>Bedroom</th>
<th>Bathroom</th>
<th>Square Feet</th>
<th>Price</th>
<th>Available</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="rows">
    <td><input type='text' name='bedroom[]' value='0' class='input-small'></td>
    <td><input type='text' name='bath[]' value='0' class='input-small'></td>
    <td><input type='text' name='sqrt[]' value='0' class='input-small'></td>
    <td><input type='text' name='price[]' value='0' class='input-small'></td>
    <td>
        <select name='avail[]' class='input-small'>
        <option value='yes'>Yes</option>
        <option value='no'>No</option>
        </select>
    </td>
    <td><button type="button" class="btn btn-danger btn-small removeRow">remove</button></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-small btn-primary addrow">add row</button>

这是我的js

<script type="text/javascript">
$(document).ready(function() {
    $(".addrow").click(function() {
        var tblrow = $('table.property_units tr.rows:last').clone();
        $("table.property_units tbody").append(tblrow);
    });

    $(".removeRow").click(function() {
        $(this).closest("tr").remove();
        return false;
    });
});
</script>
4

3 回答 3

2

您必须委托事件：

$(document).on('click', '.removeRow', function() {
    $(this).closest("tr").remove();
    return false;
});

为了提高性能，我会在表中添加一个 id 并将事件绑定到表而不是document.

如需进一步解释，请查看此问题。

于 2013-08-24T21:48:32.750 回答
0

当您使用 jQuery 创建新元素时，您必须绑定一个事件。您可以使用委托代替单击，在此处查看：在此处 输入链接描述

或者你可以制作函数 deleteRws(){ 你的删除代码} 然后在之后调用它： $("table.property_units tbody").append(tblrow);

于 2013-08-24T21:47:40.990 回答
0

这$(".removeRow").click(...仅适用于在调用它时存在的任何匹配行。它不会影响通过.addrow单击处理程序创建的新行（及其内容）。

您需要手动添加：

$(document).ready(function() {
  var remover = function() {
    $(this).closest("tr").remove();
    return false;
  };

  $(".addrow").click(function() {
          var tblrow = $('table.property_units tr.rows:last').clone();
          $('.removeRow', tblrow).click(remover);
          $("table.property_units tbody").append(tblrow);
      });

  $(".removeRow").click(remover);
});

示例：http ://codepen.io/paulroub/pen/Bekit

于 2013-08-24T21:48:59.667 回答