title: Refresh list after adding an item with jQuery UI sortable plugin
body: <p>Alright so I have a nested sortable list, each item is therefore both a container and a sortable element.</p>
  
  <p>The problem I am facing is that, whenever I add a new element, I want jQuery to refresh its internal state with the new item. 
  According to the documentation, one has to call the sortable method passing as parameter 'refresh', but still I can't make it work.</p>
  
  <p>Sample code:
  <a href="http://jsfiddle.net/X5sBm/" rel="noreferrer">http://jsfiddle.net/X5sBm/</a></p>
  
  <p>JavaScript: </p>
  
  <pre><code>$(document).ready(function() {
      var list = $('#mycontainer ul').sortable({
          connectWith: '#mycontainer ul',
          placeholder: 'myplaceholder'
      });
  
      function addElement(text) {
          $('#mycontainer &gt; ul').append('&lt;li&gt;' + text + '&lt;ul&gt;&lt;/ul&gt;&lt;/li&gt;');
          list.sortable('refresh');
      }
  
      addElement('yolo');
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="mycontainer"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              Some text
              &lt;ul&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
              Some text 2
              &lt;ul&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#mycontainer &gt; ul {
      display: block;
  }
  
  #mycontainer &gt; ul ul {
      min-height: 10px;
      padding-left: 20px;
  }
  
  .myplaceholder {
      background-color: yellow;
  }
  </code></pre>
  
  <p>Try to drag one pre existing item under the newly added one, you won't be able to do so even after the refresh.</p>