第二次单击时未附加输入

Question

我正在创建一个简单的树结构，它将输入字段保存为 child。每个 child 包含一个输入字段和两个按钮。一个按钮用于为输入添加 child，另一个按钮用于删除节点。我的代码显示在下面的代码片段中，它没有按预期工作。问题是：我不能添加多个 child 只有一个 child 正在添加。

$("#main").on('click', '.add', function() {
  var $td = $(this).parent();
  var $td1 = $('<td>', {
    html: '<input  />      <button class="add">        Add      </button>      <button class="remove">        Remove      </button>'
  });
  console.log($td.children('table').length);
  if ($td.children('table').length)
    $td.children('table').children('tr').append($td1);
  else
    $td.append($('<table>', {
      html: $('<tr>', {
        html: $td1
      })
    }))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="main" style="width:100%;text-align:center">
  <tr>
    <td>
      <input type="text" />
      <button class="add">
        Add
      </button>
      <button class="remove">
        Remove
      </button>
    </td>
  </tr>
</table>

Answer 1

所有现代浏览器上的浏览器解析器（AFAIK？！）添加 TBODY 元素。有关详细信息，请参阅 this answer。

在您的情况下，这会使 $td.children('table').children('tr') 返回空的匹配集，因为 children() 仅针对直系后代（一级）。

您可以改用 find() 方法，匹配任何后代：

$td.children('table').find('tr').append($td1);

第二次单击时未附加输入

Input not getting appended on second click

html

javascript

jquery

event-delegation