title: jQuery UI sortable sort new ul which is added dynamically
body: <p>I have a page where it allows users to add new <code>ul</code> dynamically using jQuery, which I took this as reference: <a href="http://railscasts.com/episodes/197-nested-model-form-part-2?view=asciicast" rel="nofollow">http://railscasts.com/episodes/197-nested-model-form-part-2?view=asciicast</a></p>
  
  <p>I used this to add the new <code>ul</code> dynamically:</p>
  
  <pre><code>function add_fields(link, association, content) {
    var new_id = new Date().getTime();
    var regexp = new RegExp("new_" + association, "g");
    $(link).parent().before(content.replace(regexp, new_id));
  }
  </code></pre>
  
  <p>Now I am extending it to make it sortable with the following:</p>
  
  <pre><code>  $(document).ready(function () {
      $(".sortable_list").sortable({
        items: "li"
      }).disableSelection();
    });
  </code></pre>
  
  <p>The problem over here now is that for existing content, there is a class <code>ui-sortable</code> in the <code>ul</code> appended when the page loads, so the jQuery only remembers these <code>ul</code> as sortable. When I add a new <code>ul</code> dynamically, the <code>ui-sortable</code> class is not appended, thus it is not sortable.</p>
  
  <p>I tried hardcoding my template to include a class <code>ui-sortable</code> on each new <code>ul</code> whenever it is added dynamically, but jQuery still doesn't recognize the new <code>ul</code> with <code>ui-sortable</code> as sortable.</p>
  
  <p>Correct me if I am wrong. I am suspecting that jQuery only finds all lists that are in <code>ul.sortable_list</code> as sortable when it first loads. That's it. For each newly added <code>ul.sortable_list</code>, it won't be sortable.</p>
  
  <p>Please advise how can I fix this. Thanks!</p>