0

我在使用 jQuery UI 和克隆元素时遇到了一个奇怪的问题。尽管 jQuery UI 事件似乎被正确复制，但似乎这些事件仍然引用原始 DOM 对象，而不是克隆的对象。

这个 JS 小提琴显示了这个问题：http: //jsfiddle.net/XDrC5/

这是HTML：

<button id="clone">Clone</button>

<div id="source">
  <div id="elem"></div>
</div>

<div id="copy">
</div>

和 Javascript：

$(document).ready( function() {
    $("#elem").resizable({
        containment:"parent"
    }).draggable({
        containment:"parent"
    });

  $("#clone").on("click", function() {
    var newHTML = $("#source").clone(true);

      $("#copy").html(newHTML.contents());
  });
});

单击克隆会正确复制下部框中的橙色方块，但尝试拖动新方块会导致原始方块移动。尝试调整新方块的大小根本没有任何作用。

当试图在克隆的元素上调用 jQuery UI 方法时，这会导致更大的问题。例如，.draggable("destroy");在克隆之后调用实际上会从原始元素中删除可拖动元素，从而使新元素和旧元素都变为不可移动。

我不确定是否有办法解决这个问题，如果我只是太密集，或者这是一个不可避免的错误。任何帮助是极大的赞赏。

4

1 回答 1

1

我认为作为对 Beetroot-Beetroot 的回应，问题可能是通过这样做，clone(true)您正在复制附加到前一个的事件，elem这意味着新的元素仍然被告知在#sourcediv 内调整大小，尝试不使用true，然后将可调整大小的事件重新附加到#copydiv 中的元素。

我已经更新了 JSFiddle - http://jsfiddle.net/XDrC5/2/这似乎解决了可拖动的问题。

于 2013-02-25T10:56:27.447 回答