使調整大小的元素動態

我試圖動態給一個元素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就緒或正文結束時運行沒有區別。 –

使調整大小的元素動態

回答

相關問題