Question

I have a jQuery UI code that allows an existing box to be draggable. When I append an additional box, however, those boxes are not draggable. Here’s a JSFiddle: http://jsfiddle.net/MJKhq/4/
(the click me button adds another box to the document, but that box is not draggable like the first).
Here’s also a code sample because it required me to:

$(function()
{
    $( "#draggable" ).draggable();
});

function makenew()
{
    $("body").append('<div id="draggable" class="ui-widget-content"> <p>Drag me around</p></div>');
}

Answer 1

Every dom element must have unique id to work on or parent must have to be different. You can not use same id, more after appending it to dom bind event on it. You can define it like this.

<script>
function _bindEvents()
{
    $(".ui-widget-content" ).draggable();
}

$(function(){
    _bindEvents();
});

function makenew()
{
    $("body").append('<div id="draggable" class="ui-widget-content"> <p>Drag me around</p></div>');
    _bindEvents();
}
</script>