Jquery ui使用.clone（true，true）和#x2B；时的奇怪行为。删除（）_Jquery_Jquery Ui_Clone_Draggable

Jquery ui使用.clone（true，true）和#x2B；时的奇怪行为。删除（）

jquery jquery-ui

Jquery ui使用.clone（true，true）和#x2B；时的奇怪行为。删除（）,jquery,jquery-ui,clone,draggable,Jquery,Jquery Ui,Clone,Draggable,我在jquery ui和jquery.clone（）、remove（）中遇到wierd行为。我使用的是jQuery1.7和jQueryUI1.8.16。问题是，当我使用remove（）函数从深度克隆的元素中删除元素时，删除操作会通过从DOM中的元素中删除可拖动属性来影响克隆的元素和文档中相应的元素。我不确定我是否做错了什么，但在我看来，这要么是我对克隆（true，true）的工作原理的误解，要么是jqueryui中的一个bug 考虑以下几点 <!DOCTYPE html PUBLIC

我在jquery ui和jquery.clone（）、remove（）中遇到wierd行为。我使用的是jQuery1.7和jQueryUI1.8.16。问题是，当我使用remove（）函数从深度克隆的元素中删除元素时，删除操作会通过从DOM中的元素中删除可拖动属性来影响克隆的元素和文档中相应的元素。我不确定我是否做错了什么，但在我看来，这要么是我对克隆（true，true）的工作原理的误解，要么是jqueryui中的一个bug

考虑以下几点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('#testp').draggable();
    //the following line causes the draggable classes to be removed from the document
    //as well as the cloned object ,the expected behaviour is that that #testp will be 
    //removed only from the clone...
          var test = $("#test")
           .clone(true,true)
           .find('#testp')
           .remove()
           .end(); //some more manipulation here
        });
  </script>
</head>
<body>
  <div id="test">
    <p id="testp">some text</p>
  </div>
</body>
    </html>


$（文档）.ready（函数（）{
$（'#testp'）.draggable（）；
//下一行导致从文档中删除可拖动类
//与克隆对象一样，预期的行为是#testp将
//仅从克隆中删除。。。
var测试=$（“#测试”）
.clone（真，真）
.find（“#testp”）
.删除（）
.end（）；//这里需要更多的操作
});
一些文本

更新：似乎.clone（true，true）仍然保留克隆和原始用户之间共享的一些数据。即使使用类选择器更改id/applicating.draggable（），并且不从dom中删除任何元素，拖动克隆也会移动原始对象，而不会影响克隆（正如人们所想）。其他处理程序（如click等）已正确克隆

在看到一些关于克隆div与（true，true）和draggable插件有关的问题的帖子后，我决定不再复制克隆div等，而是使用detach（）和resattach作为解决方法

请注意，其他尝试克隆（true，true）以克隆应用了draggable（）插件的div的人：如果您克隆（true，true），一些数据将被复制到克隆中，并且通过对其应用draggable（），您将拖动原始数据，我猜这不是您想要做的。

改为执行shall.clone（）命令，然后将draggable（）绑定到克隆。

尝试使用不同的语句：

var test = $("#test");
test.clone(true,true).appendTo("whatever").find('#testp').remove();

PS:clone（）和remove（）位于jQuery核心中。jQuery用户界面的存在不应影响他们，但请务必在未安装用户界面的情况下进行尝试。

请查看：

请注意，在克隆过程中，您可能必须解除事件克隆的绑定并重新应用它们-这在某种程度上取决于您的操作方式，如果您在应用时将事件应用于原始事件（如果新的应用选择包括原始事件），则您可能需要解除源的绑定

在您的情况下，您正在使用一个id选择器，然后将其删除—它将删除它找到的id的第一个实例

您可能需要执行以下操作：（为清晰起见，请使用详细版本）

也许你在这里重新绑定

请参见此示例：

能否将其添加到JSFIDDLE中？它不起作用。我想将克隆的元素分配给一个变量。并在以后重新分配它。（我还不想将其附加到文档中）var test=$（“#test”）；var copy=test.clone（true，true）.find（'#testp'）.remove（）.end（）//最后一行导致相同的行为我还应该注意，其他行为保留在原始行上，例如保留单击事件。这就是我认为它与jquery UIT更相关的问题可能是由于使用了ID。克隆将具有相同的ID，因此您需要在克隆后更改它们，或者改用类。另外请注意，

.clone（）

的jQuery文档中包含了以下限制条件但是，元素数据中的对象和数组不会被复制，并将继续在克隆元素和原始元素之间共享。要深度复制所有数据，请手动复制每个数据：…”。使用

draggable（）

可能需要考虑此方面。请注意clone（）文档中的以下注释：从jQuery 1.5开始，withDataAndEvents可以选择使用deepWithDataAndEvents进行增强，以复制克隆元素的所有子元素的事件和数据。这就是我使用.clone（true，true）的原因实际上，它并没有删除dom上的ID。只有可拖动的属性，实际上我正试图避免重新绑定，这就是为什么要进行这种操作…我试图实现的是一个带有可拖动元素的编辑器，它在页面之间“ajax导航”时保留所有行为。我发现我可以在页面之外克隆导航器问题是，另一个编辑器将尝试加载一些ajax调用，而这正是我试图删除的。因此，您的问题似乎改变了它。注意：事件和可拖动之间有区别，它更像是一个“小部件”，而不是像“单击”这样的事件，您可能需要在以后重新附加可拖动的r您可以从先前从DOM中删除的内容中重新插入它。

var test = $("#test");
var newtest = test.clone(true, true);
newtest.find('#testp').remove();
newtest.attr('id', 'newtest');
newtest.appendTo("#whatever");