Add jquery ui function draggable/resizeable after appending/adding it on the page

Question

I have problem on my webpage, I am adding an element in the document when the user clicks on a specific button.

the element is

<div class="draggableResizable">
  Some text
</div>

script.js

$('#button').click(function() {
  $("#pageWrap").append(element)
})

$('.draggableResizable').draggable().resizable()

Any suggestions are welcome.

Thank you.

Solution

Just restructure so you initialize the widgets after adding the element:

$('#button').click(function() {

    //create an element
    var $element = $('<div class="draggableResizable" />').text('some text');

    //append it to the DOM
    $("#pageWrap").append($element);

    //make it "draggable" and "resizable"
    $element.draggable().resizable();
});

Here is a demo: http://jsfiddle.net/ZSgBP/1/

Comments

[Jasper]

You can also make this into a one-liner if you want: $("#pageWrap").append($('<div class="draggableResizable" />').text('some text').draggable().resizable());

[Gino]

For me in your jsfiddle demo the resizable do not work