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/