Создание элемента Resizeable динамически

Question

Я пытаюсь динамически дать ЭЛЕМЕНТ jQuery UI Resizable, когда он был добавлен в йот 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.

При запуске вышеуказанного кода img, вставленный в DOM, имеет следующий HTML;

Это, кажется, не включает в себя какой-либо из кода пользовательского интерфейса, который отображает Resizeable стрелки изображения, т.е.

<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> 

Есть ли способ, я могу добавить весь код, который делает элемент изменения размера?

Answer 1

Я просто повторно произвел свой код и он, кажется, работает нормально, проверить это 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>