克隆上丢失了JQuery droppable

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

有谁知道如何使这个工作？

Answer 1

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

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

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

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

HTML

 
Initial 

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

Answer 2

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

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