我正在实时创建html元素并将其附加到窗口。
我有的问题是我不能在它们上使用jquery ui。我尝试了deffer方法,但是效果不佳。
我要完成的工作是克隆最后一个div
,将其添加到container
并将其设置为resizable
这是一些代码jsfiddle:
<div id="container" class="ui-widget-content">
<h3 class="ui-widget-header">Containment</h3>
<div id="" class="ui-state-active resizable">
<h3 class="ui-widget-header">Resizable</h3>
</div>
<div id="" class="ui-state-active resizable">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</div>
<button class="add">add</button>
#container {width: 600px;height: 300px;}
#container h3 {text-align: center;margin: 0;margin-bottom: 10px;}
.resizable {width: 100px;height: 100px;float: left;}
.resizable, #container {padding: 0.5em;}
var dfd = $.Deferred();
dfd.done(function () {
var lastDiv = $('.resizable').last();
var lastDivClone = lastDiv.clone();
lastDivClone.appendTo('#container');
return lastDivClone;
});
$('.add').on("click", function () {
var x = dfd.resolve();
x.resizable("enable");
});
$(".resizable").resizable({
containment: "#container",
grid: 50
});
有任何想法吗?
最佳答案
首先卸下可调整大小的手柄。
lastDivClone.appendTo('#container').find('.ui-resizable-handle').remove()
.end().resizable({
containment: "#container",
grid: 50
});
http://jsfiddle.net/ExplosionPIlls/945p6/2/
关于javascript - 如何使新的生活/克隆元素可调整大小与jQuery UI?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16408420/