Making an element resizeable dynamically

Question

I'm trying to dynamically give an element the jQuery UI Resizable once it has been added to the dom uaing the following:

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

      });

    });

What this does, it finds an image that has been clicked on and given the active class. when insert-image (a href button) is clicked, copy the image and append it to the DOM.

This works fine. The problem comes when trying to give the image the resizeable.

When running the above code, the img inserted to the DOM has the following HTML;

It doesn't seem to include any of the UI code that displays the resizeable arrows image, i.e

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

Is there a way i can add all of the code that makes the element resizeable?

Answer 1

I've just re-produced your code and it seems to work fine, check out this jsFiddle: http://jsfiddle.net/gYdMV/

Updated with click event: http://jsfiddle.net/gYdMV/1/

Code:

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

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