jquery - .append() elements of one to another

Question

Consider:

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

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

What exactly happens when I do the following?

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

I suspect all <li> elements to get removed from the first <ul> and get inserted into 'ul.target'. Would the event handlers attached to <li>'s get removed?

Answer 1

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

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

大概not cloned意味着事件处理程序不会被转移。

然而，它继续说：

但是，如果有多个目标元素，则会为第一个目标之后的每个目标创建插入元素的克隆副本。

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

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'));
  });
});