jQuery UI可拖动和可调整大小在单击1次后停止工作

Question

我这里有一把小提琴：https://jsfiddle.net/dfaunce/L3j1qmpu/5/

如果您单击任何项目框，它会将该框放入容器(右侧空白处(。目标是使容器中的框既可拖动又可调整大小。

• jQuery UI可调整大小的句柄显示在框中，但它什么也不做
• 您只能拖动项目一次。在那之后，盒子什么也不做

我做错了什么？

$(function() {
var $container = $("#container"),
$objects = $("#objects");
$(".box-selectable").on("click", function() {
var $g = $(this).clone(true, true);
$g
.removeClass("box-selectable")
.addClass("draggable resizable")
.appendTo($container)
.resizable()
.draggable();

$(this).remove();    
});  
});

Answer 1

好吧，我想好了。。。。

如果我将方法更改为：

$(document).on("click", ".box-selectable", function() { .... `

一切正常。

我不知道为什么，但它确实。。。