Div создан из кода не загружает классы

Question

У меня есть Div контейнера и внутри пары DIV с классом демки и гравитации, как

<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> 

и добавить новый DIV из кода как

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

в onReady функция у меня есть код, например

и он работает для divs внутри, но он не работает для div, Я добавил из кода. Div из кода показывает внутри div с id = "container", но не изменяет размер/перетаскивает/droppable. Кто-нибудь знает, в чем проблема?

Answer 1

Вот пример скрипки для вас, кажется, работает.

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

В случае удален скрипку,

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();​ 

// отредактирован после Jamiec комментария вы можете использовать

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

где вы добавить временные дивы.

Answer 2

Вы должны сделать это для вновь созданного DIV тоже:

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

Answer 3

Проблема заключается в том, что вы добавляете новый DIV после призыв к resizable().draggable().droppable() на всех своих братьев и сестер.

Не могли бы вы не просто добавить это перед добавлением его (BTW вы можете собрать все эти звонки):

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

Вот jsfiddle демонстрирующее, что вновь добавленные дивы делать на самом деле работы: http://jsfiddle.net/xqakj/