。附加（） <li> 一个元素 <ul> 到另一个 <ul>

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/

If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned):

Presumably not cloned means event handlers don't get transferred.

However, it goes on to say:

If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.

That means that because there are multiple elements, event handlers DO get transferred, as demonstrated here:

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