CODEWITHSUNDEEP
javascriptjqueryjquery-ui
lawx
lawx

Reputation: 388

jQuery Appended boxes not draggable

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

Upvotes: 0

Views: 99

Answers (3)

The Alpha
The Alpha

Reputation: 146249

Remember id must be unique, you can't use same id more than one element on the same page and in this case you can use class instead of id, like

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

Example.

Upvotes: 0

username
username

Reputation: 4308

There should be only one element with the same id in DOM tree. By adding a new box you get two elements with same id. Try using classes.

Upvotes: 0

Waqar Alamgir
Waqar Alamgir

Reputation: 9978

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>

Upvotes: 1

Related Questions