Question

考虑：

<ul>
    <li class="abc">one</li>
    <li class="abc">two</li>
    <li class="abc">three</li>
</ul>

<ul class="target"></ul>

当我执行以下操作时会发生什么？

$('.target').append($('.abc'));

我怀疑所有<li>个元素都会从第一个<ul>中移除并插入'ul.target'。附加到<li>的事件处理程序是否会被删除？

Answer 1

http://api.jquery.com/append/

如果以这种方式选择的元素插入到单个位置在DOM的其他地方，它将被移动到目标（未克隆）：

据推测，not cloned表示事件处理程序无法转移。

然而，它继续说：

但是，如果有多个目标元素，则克隆副本将在第一个目标之后为每个目标创建inserted元素。

这意味着因为有多个元素，事件处理程序会被转移，如下所示：

http://jsbin.com/UMUHOVe/1/edit

  <h1>list one</h1>
  <ul>
    <li class="abc">one</li>
    <li class="abc">two</li>
    <li class="abc">three</li>
</ul>

  <a href="#">Transfer</a>

  <h1>list two</h1>
<ul class="target"></ul>

$(document).ready(function() {
  $(".abc").each(function() {
    $(this).click(function() {
      console.log("hi");
    });
  });
  $("a").click(function(event) {
    event.preventDefault();
$('.target').append($('.abc'));
  });
});

.append（）<li>一个<ul>的元素到另一个<ul> </ul> </ul> </li>

1 个答案: