克隆上丢失了JQuery droppable

时间:2013-04-19 03:15:25

标签: jquery jquery-ui

我正在开发一个应用程序,它要求我克隆一个可以放置的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'));

有谁知道如何让它发挥作用?

2 个答案:

答案 0 :(得分:0)

如果您没有执行element的深层副本,并且重新应用了droppable插件,那么它应该可以正常工作。

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

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

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

HTML

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

JS

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);

答案 1 :(得分:0)

只需将您的代码更改为FIDDLE

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