Question

I have a page where it allows users to add new ul dynamically using jQuery, which I took this as reference: http://railscasts.com/episodes/197-nested-model-form-part-2?view=asciicast

I used this to add the new ul dynamically:

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));
}

Now I am extending it to make it sortable with the following:

  $(document).ready(function () {
    $(".sortable_list").sortable({
      items: "li"
    }).disableSelection();
  });

The problem over here now is that for existing content, there is a class ui-sortable in the ul appended when the page loads, so the jQuery only remembers these ul as sortable. When I add a new ul dynamically, the ui-sortable class is not appended, thus it is not sortable.

I tried hardcoding my template to include a class ui-sortable on each new ul whenever it is added dynamically, but jQuery still doesn’t recognize the new ul with ui-sortable as sortable.

Correct me if I am wrong. I am suspecting that jQuery only finds all lists that are in ul.sortable_list as sortable when it first loads. That’s it. For each newly added ul.sortable_list, it won’t be sortable.

Please advise how can I fix this. Thanks!

Answer 1

I read it,Use this easy way.It may will work possibly.

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));

  $(".sortable_list").sortable({
    items: "li"
  }).disableSelection();     

}

Note : Make sure that your sortable code execute work.I run this code one year age and it work for me great.I hope it work for you same as me