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

问题

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.

回答1:

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/

回答2:

You need to use the .on() or .live() function if you want to add events to an object after adding it to the DOM. If you don't want to use either of these functions, you can simply add the div to the HTML, then hide it on page load and call .show() on it.

来源：https://stackoverflow.com/questions/10308931/add-jquery-ui-function-draggable-resizeable-after-appending-adding-it-on-the-pag