Question

I have div container and inside couple div with class demo and gravity like

<div id="container" style="position:relative;width=400px;height=400px;">
<div class="demo gravity" ></div>
<div class="demo gravity"></div>
<div class="demo gravity"></div>
</div>

and I add new div from code like

    var temp = $('<div/>');
    temp.attr('id', 'foo');
    temp.css( {
        position : 'absolute',
        top : '0px',
        left : '0px',
        width : '200px',
        height : '40px'
    });
    temp.addClass("gravity");
    temp.addClass("demo");
    $('#container').append(temp);

in onReady function I have code something like

$(.demo).resizable().draggable().droppable() ;

and it works for divs inside but it doesn’t work for div which I added from code. Div from code shows inside div with id=”container” but is not resizable/draggable/droppable. Does anybody knows what is the problem ?

Answer 1

Here fiddle example for you, seems working.

http://jsfiddle.net/ymutlu/cvZpX/2/

In case deleted fiddle,

    var temp = $('<div>');
    temp.append("33");
    temp.attr('id', 'foo');
    temp.css( {
        position : 'absolute',
        top : '0px',
        left : '0px',
        width : '200px',
        height : '40px'
    });​
    temp.addClass("gravity");
    temp.addClass("demo");
    $('#container').append(temp);

var demo = $(".demo");
demo.resizable().draggable().droppable();​

//edited after Jamiec comment
you can use

temp.resizable().draggable().droppable();​

where you add temp divs.