jQuery UI перетаскиваемый не работает с вновь созданным элементом DOM

У меня есть элемент DOM, который можно перетаскивать с помощью пользовательского интерфейса jQuery. Все работает нормально, но когда я создаю какой-либо элемент с помощью jQuery, их вообще нельзя перетаскивать. т.е.

$('div.draggable').draggable(); //Existing element , it works :)
$('p.draggable').draggable() ; //Newly created paragraph with same class name, it doesnt work at all :(

Заранее спасибо!!!

Я пытаюсь сделать это:

<script type="text/javascript">
     $(document).ready(function(){
         $('body').append('<p class="draggable">Newly Created Paragraph</p>');
         $('p.draggable').draggable(); **//This is not working**
     });
</script>

Однако каким-то образом это работает

    <script type="text/javascript">
     $(document).ready(function(){
         $('body').append('<p class="draggable">Newly Created Paragraph</p>')
                 .find('p.draggable').draggable(); **This is working**

     });
</script>