Make a dynamically generated div droppable

Question

I am working on a Table with div inside the cell, and I want that div to be droppable. And when I drop something in a div it generate a new div under the first one. But the dynamically generated div must be droppable to and now it's not...

Here is the creation of a div:

// in a loop with i
divCreate = $("<div>", { id: "divCreate" + i, class: "droppable" });
$(divCreate).css("text-align", "center");
$(divCreate).css("width", "125px");
$(divCreate).css("height", "30px");

$(Cell).append($(divCreate));    

JS droppable :

$(".droppable").droppable( function() {
  // a lots of line with several function
})

So I try to add that $(divCreate).droppable(); to the creation of the div. Now the div is droppable but not with the JS function that I affect to the class ".droppable".

Do I need to make $(divCreate).live("droppable"); ? Or is it impossible and I need to put all the code from the JS function to the div creation? I really want to avoid that if it is possible.

Answer 1

Move the droppable code into a named function:

function my_droppable() {
    // a lots of line with several function
}

And change your general binding to:

$(".droppable").droppable(my_droppable);

Then you can do:

divCreate.droppable(my_droppable);

after appending new elements dynamically.

Answer 2

Try to use:

$(divCreate).appendTo($(Cell)).droppable();

Answer 3

Here is the sample I have created.

$( "<div/>", {
  "class": "test",
    id:"myDiv",
  text: "Drag me!",
    width:"125",
    height:"30",
    'text-align':"center"
}).appendTo( "#droppable" );

$("#myDiv").css("text-align", "center");

$("#droppable" ).draggable();