jquery

Question

我提供了一个简单的表结构，如下所示。

现在，当我想在指定行之后动态添加行时，表会出现故障并且单击事件将停止工作。

当使用.append（）时，一切都按预期工作。 但是，当我尝试在指定位置添加行时，请说 我点击了＆＃39; +＆＃39;在第2行，这意味着，我必须在当前2和3之间添加一个新行。这不起作用，并且最重要的是，click事件停止响应。

＆＃13;

＆＃13;

$('tbody').on('click', 'input[type=button][class=add]', function() {
  var $tr =
    $(
      "<tr>" +
      "<td><input type='text'/></td>" +
      "<td><input type='text'/></td>" +
      "<td><input class='add' type='button' value='+'/></td>" +
      "<td><input class='del' type='button' value='-'/></td>" +
      "</tr>"
    );
  var index = $(this).closest('tr').index();
  alert(index);
  //$('tbody').append($tr);  //---> works perfectly
  $('tbody').eq(index).after($tr); //---> Not working properly
  /*
  		click not responding for the newly added row.
  */
});

$('tbody').on('click', 'input[type=button][class=del]', function() {
  $(this).closest('tr').remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Ingredient</td>
      <td>Measurement</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type='text' />
      </td>
      <td>
        <input type='text' />
      </td>
      <td>
        <input class='add' type='button' value='+' />
      </td>
      <td>
        <input class='del' type='button' value='-' />
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

我还为它创建了jsfiddle。

Answer 1

您的问题在这一行：

$('tbody').eq(index).append($tr);

更改为：

$('tbody tr').eq(index).after($tr);

摘录：

$('tbody').on('click', 'input[type=button][class=add]', function(){
    var $tr =
            $(
                    "<tr>"+
                    "<td><input type='text'/></td>"+
                    "<td><input type='text'/></td>"+
                    "<td><input class='add' type='button' value='+'/></td>"+
                    "<td><input class='del' type='button' value='-'/></td>"+
                    "</tr>"
            );
    var index = $(this).closest('tr').index();
    $('tbody tr').eq(index).after($tr);
});

$('tbody').on('click', 'input[type=button][class=del]', function(){
    $(this).closest('tr').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
    <thead>
    <tr>
        <td>Ingredient</td>
        <td>Measurement</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type='text'/></td>
        <td><input type='text'/></td>
        <td><input class='add' type='button' value='+'/></td>
        <td><input class='del' type='button' value='-'/></td>
    </tr>
    </tbody>
</table>

Answer 2

您的代码中的

$('tbody').eq(index).after($tr)实际上是在tbody之外添加新行。您可以将其更改为$('tbody tr').eq(index).after($tr)

$('tbody').on('click', 'input[type=button][class=add]', function() {
  var $tr =
    $(
      "<tr>" +
      "<td><input type='text'/></td>" +
      "<td><input type='text'/></td>" +
      "<td><input class='add' type='button' value='+'/></td>" +
      "<td><input class='del' type='button' value='-'/></td>" +
      "</tr>"
    );
  var index = $(this).closest('tr').index();
  alert(index);
  //$('tbody').append($tr);  //---> works perfectly
  $('tbody tr').eq(index).after($tr); //---> Not working properly
  /*
  		click not responding for the newly added row.
  */
});

$('tbody').on('click', 'input[type=button][class=del]', function() {
  $(this).closest('tr').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Ingredient</td>
      <td>Measurement</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type='text' />
      </td>
      <td>
        <input type='text' />
      </td>
      <td>
        <input class='add' type='button' value='+' />
      </td>
      <td>
        <input class='del' type='button' value='-' />
      </td>
    </tr>
  </tbody>
</table>