[英]how to make new live / cloned element resizable with jquery ui?
i am creating html elements live and appending them to the window. 我正在实时创建html元素并将其附加到窗口。
The issue im having is that i can't use jquery ui on them. 我有的问题是我不能在它们上使用jquery ui。 I have tried the deffer method, but that doesn't work as well.
我尝试了deffer方法,但是效果不佳。
What i am trying to accomplish is to clone the last div
, add it to the container
and make it resizable
我要完成的工作是克隆最后一个
div
,将其添加到container
并使其resizable
here's some code jsfiddle : 这是一些代码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
});
any ideas? 有任何想法吗?
Remove the resizable handle first. 首先卸下可调整大小的手柄。
lastDivClone.appendTo('#container').find('.ui-resizable-handle').remove()
.end().resizable({
containment: "#container",
grid: 50
});
http://jsfiddle.net/ExplosionPIlls/945p6/2/ http://jsfiddle.net/ExplosionPIlls/945p6/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.