jquery - appended element not draggable

So i have one div element that i append on my DOM with a click of a link. The problem is that i should be able to move that element around, but if i append it to my DOM i can't drag it at al开发者_开发技巧l.

So is the live()-function solution? If it is, how should i use it? I kinda don't know how. Here's the minimalistic code:

element to be appended (data.html):

<div id="menu">
  <p>random stuff here</p>
</div>

jquery:

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

$("#button").click(function(){
    //custom function for exists()
    if ($("#menu").exists()){
        $("#menu").remove();
    }
    else {
        $.get("data.html", function(data){
            $("body").append(data);
        });
    }
});

When you append, bind drag event. It should look like this:

 $("#button").click(function(){
    //custom function for exists()
    if ($("#menu").exists()){
        $("#menu").remove();
    }
    else {
        $.get("data.html", function(data){
            $("body").append(data);
            $("#menu").draggable();
        });
    }
 });