title: how do i make dynamically created elements draggable()?
body: <p>I'm trying to figure out how to make dynamically created divs draggable, so I've created <a href="http://jsfiddle.net/carriecoxwell/m3BXZ/7/">this very simple thing</a> to help me. I understand that I have to use the on() event with a non-dynamic handler. By having the body element handle the cloning event in the linked JSfiddle, I've succeeded in making the dynamically created divs clonable, but they are not draggable. What am I doing wrong? </p>
  
  <p>Thank you in advance for the help!</p>
  
  <pre><code>$(document).ready(function () {
      $("body").on('click', '.pink', function () {
          $('.container').append($("&lt;div class='bl pink'&gt;&lt;/div&gt;"))
      });
      $("body").on('click', '.blue', function () {
          $('.container').append($("&lt;div class='bl blue'&gt;&lt;/div&gt;"))
      });
      $("body").on('click', '.coral', function () {
          $('.container').append($("&lt;div class='bl coral'&gt;&lt;/div&gt;"))
      });
      $(".draggable").draggable();
  });
  </code></pre>