jQuery Cloning Nodes(节点克隆)

jQuery的clone(boolean)方法可以复制DOM的元素，然后移动到别的地方。特别是jQuery1.2不仅可以复制元素的内容，而且还可以复制元素对事件的处理方法（event handling）。我在上篇文章里介绍了jQuery对事件的委派和传递，本文将介绍如何用jQuery的Clone方法来实现相同的目的。

下面是上篇文章(例子三)里用到的的HTML无序列表(unsorted list):

 <div>
   <ul id="list2">
     <li>非按钮 </li>
     <li><button>点击我</button> </li>
   </ul>
 </div>

如果使用默认的克隆方法如下，我们只能复制节点元素，元素的事件处理并没有被传递。

代码：

$(document).ready(function() {
  $('#list2 li button').click(function() {
  var $parent = $(this).parent();
//这里this是button，所以$(this).parent()是li
  $parent.clone().insertAfter($parent);
//li被克隆后，插入到li的后面
  });
});

演示：

• 非按钮

为了让元素的事件处理也被传递，我们必须使用参数true。

代码：

$(document).ready(function() {
  $('#list3 li button').click(function() {
  var $parent = $(this).parent();
  $parent.clone(true).append('我是克隆的').insertAfter($parent);
  });
});

演示：

• 非按钮