Drag element after appending it

Question

After appending .textbox , I want to be able to drag it around.

With the code below, I can append .textbox, but I can't get it to drag. What's wrong?

$('#add_textbox').on({

    click: function() {
           var textbox = "<div class='textbox'></div>";
           $('#container').append(textbox);
},

});


$('.textbox').on({
     mouseenter: function() {
           $('.textbox').draggable();
}
});

Answer 1

When you want to make a element draggable, just call draggable() on it. You don't need to do it in a event handler.

Try this:

$("#add_textbox").on("click", function () {   
   var textbox = $("<div class='textbox'></div>");
   textbox.appendTo("#container");

   $(".textbox").draggable();
});

fiddle