[jQuery] Appended element is not draggable

Hi
I have a container div with some spans. I had set the spans to be
dragable and I want to do a function that on click will append a new
span to my container and make it also draggable.

I manage to append the new span in #selectable container but it is not
draggable.

My code is:

<script type="text/javascript">
$(function() {
                $("span").draggable();
});
</script>

<script type="text/javascript">
 $(document).ready(function(){
        $("#selectable").click(function(){
                 $("#selectable").append("<span>The new span</span>");
        });

});
</script>

and the markup is:
<div id="selectable">
<div class="ui-widget-content" style="width: 800px; height: 500px;
background:#ccc;">
        <span class="text draggable">Item 1</span>
        <span class="text draggable">Item 2</span>
        <span class="text draggable">Item 3</span>
        <span class="text draggable">Item 4</span>
        <span class="text draggable">Item 5</span>
        <span class="text draggable">Item 6</span>
    <span class="clone">Clone</span>
    <p class="clone">a p replaced</p>
</div>
</div>

Thank you.