jquery - jquery insertAfter() 也插入克隆

Question

我的 js 脚本中发生了一件奇怪的事情。

当 click 函数被执行时，一个元素应该被插入到另一个元素的下方，但由于某种原因，元素克隆也被插入到那里。

怎么来的？克隆发生在 click 函数之外。

请帮助我了解发生了什么。

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

$("button").click(function() {
  $(".one").insertAfter(".two");
  $(".status").text("done");
});


var clone_one = $(".one").clone();
var clone_two = $(".two").clone();
$("body").append(clone_one);
$("body").append(clone_two);

基本上我不明白为什么这种情况下的点击功能与在它之外发生的克隆有任何关系。

Answer 1

克隆的元素有one类，所以他的克隆也有。

因此$(".one")包含克隆和克隆。

一种解决方案是保留对原始元素的引用并将其插入：

var original = $(".one");
var clone_one = original.clone();
var clone_two = $(".two").clone();
$("body").append(clone_one);
$("body").append(clone_two);

$("button").click(function() {
  original.insertAfter(".two");
  $(".status").text("done");
});