JQuery droppable 在克隆时丢失答案

【问题标题】：JQuery droppable lost on cloneJQuery droppable 在克隆时丢失
【发布时间】：2013-04-12 09:01:02
【问题描述】：

我正在开发一个应用程序，该应用程序需要我克隆一个可放置的 JQuery 对象。

去除不必要代码的快速演示是：

var $droppable = $("#droppable");
$droppable.droppable({
    accept : "#draggable",
    hoverClass : "thickBorder",
    drop : function () {
        alert("thanks");
    }
});

var $cloned = $droppable.clone(true);

http://jsfiddle.net/tGg9Y/

我使用了 .clone(true)，其他事件处理程序（如 click）继续工作，但 droppable 丢失了。

我什至尝试使用以下方法直接重置 droppable：

$cloned.droppable($droppable.droppable('option'));

有谁知道如何让它工作？

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

如果您不执行 element 的深层复制，并且在其上重新应用可放置插件，它应该可以工作。

var $cloned = $droppable.clone(false);

我认为复制一个应用了插件的元素不是很安全，除非你 100% 确定插件的设计和编码方式可以支持使用同一个插件实例的多个 DOM 元素。

我创建了一个jsFiddle，说明了它可能是一个问题的一个原因，但可能还有很多其他原因。

HTML

<div id="initial">Initial</div>

function SomePlugin(el) {
    var $el = this.$el = $(el);

    $el.mouseenter(function () {
            //works for this handler because we did not use a closure variable
            $(this).css({ backgroundColor: 'red'});
        })
        .mouseleave(function () {
            //won't work for this one because because we are referencing $el
            //wich will always point to the other element
            $el.css({ backgroundColor: 'white'});
        });
}

//instanciate plugin
var $initial = $('#initial'), $clone;
new SomePlugin($initial);

$clone = $initial.clone(true).html('clone').attr('id', 'clone').appendTo(document.body);

【讨论】：

感谢您对我的问题进行了很好的解释。实际上，我需要在我的用例中保留其他偶数处理程序，因此我必须保留 .clone(true)，但如果我在克隆之前销毁了 droppable，然后将 droppable 重新应用于两者，它就会起作用。当然，在我的事件处理程序中，我不能使用任何闭包级变量（正如您的 jsFiddle 所展示的）

【解决方案2】：

只需将您的代码更改为此，FIDDLE

     var $cloned = $droppable.clone(false);

【讨论】：