how do i make dynamically created elements draggable()?

at time of creation put class "draggable" or id in the element. (you are not putting class) and then code should work

$('.container').append($("<div class='bl pink draggable'></div>"));
$('.draggable').draggable() 

I would do something like this

I'm calling the draggable method after I add the elements to the container, like this:

 $("<div class='bl pink'></div>").appendTo('.container').draggable();

I had the same problem. The accepted answer certainly works, but I was looking for a cleaner, more centralized solution. I didn't want to explicitly call .draggable() every place my script inserted new elements.

What I settled on was listening for DOM inserts on the parent element and then applying .draggable() on the inserted children. For example:

$("#Parent").on("DOMNodeInserted", ".ChildClass", function() { $(this).draggable(); });

Check out this fiddle for a demo: http://jsfiddle.net/9hL7u95L/