使调整大小的元素动态

我试图动态给一个元素jQuery UI Resizable一旦被添加到DOM uaing如下：使调整大小的元素动态

 insert.click(function(e) { 
     var selectedImage = $(this).parent().find('.gallery-item.active'); 
     var htmlImage = selectedImage.find('img'); 


     var selectedDiv = $('.zone.selected .drag-image'); 
     //selectedDiv.clone().append(htmlImage); 

     var insertedImage = htmlImage.clone(); 
     var resized = insertedImage.resizable(); 
     console.log(selectedDiv); 
     console.log(resized); 
     resized.appendTo(selectedDiv); 

     }); 

    });

这个做什么，它发现已被点击的图像并且给出了active类。当点击insert-image（一个href按钮）时，复制图像并将其附加到DOM。

这工作正常。试图给图像resizeable时出现问题。

运行上述代码时，插入到DOM中的img具有以下HTML;

它似乎不包括任何显示可调整大小的箭头图像UI代码，即

<div class="ui-resizable-handle ui-resizable-e" style=""></div> 
<div class="ui-resizable-handle ui-resizable-s" style=""></div> 
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001;"></div>

有没有一种方法，我可以添加所有，使元素的代码调整大小？

来源

2013-04-15 sipher_z

尝试追加'insertedImage'和*然后*调用'resizable（）'？不确定它会起作用，但实际上未添加到DOM的元素可能会导致放置其他元素时出现问题。 –

这似乎工作的魅力！ –

我刚刚重新制作你的代码，它似乎做工精细，看看这个的jsfiddle： http://jsfiddle.net/gYdMV/

已更新，点击事件：http://jsfiddle.net/gYdMV/1/

代码：

var insertedImage = $('#htmlImage').clone(); 
var resized = insertedImage.resizable(); 
insertedImage.appendTo($('#content')); 

<div id="content"> 
<div id="htmlImage"> 
    hi 
</div> 
</div>

来源

2013-04-15 15:18:13

我的代码在'click event'中被调用。所以，默认情况下它不是'可调整大小'。 –

更新我的代码与点击事件，仍然有效：http://jsfiddle.net/gYdMV/1/ –

@sipher_z这应该不会改变任何代码在这个答案。在单击事件中运行的代码与在窗口加载事件或dom就绪或正文结束时运行没有区别。 –

使调整大小的元素动态

回答

相关问题