Сортируемое обновление jQuery UI не работает после добавления нового элемента

Question

Так что, как только я добавляю новый список элементов, они больше не сортируются.Я пытался использовать сортируемую ("обновить"), но она все еще не работает.

$(function() {
    $(".test").on('click', function(event) {
      $(this).parent().append('<ul class="sortList"><li>123</li></ul>');
      $(".sortList").sortable('refresh');
    })

    $(".sortList").sortable({
        connectWith: ".sortList"
    }).disableSelection();
});

Вот jsfiddle http://jsfiddle.net/6nL0rm1a/5/, показывающий мою проблему.Как вы видите, если вы нажимаете кнопку, добавляется новый список.Но вы не можете сортировать / перетаскивать его элементы в другие списки.

Я хочу, чтобы элементы добавленного списка были перетаскиваемыми и перетаскиваемыми.Также сортируется.

Answer 1

Первая попытка добавления отсортированного при добавлении в список.

  $(function() {
    $(".test").on('click', function(event)      
     {
            $(this).parent().append('<ul class="sortList"><li>123</li></ul>').children().sortable({
        connectWith: ".sortList"
    }).disableSelection();
    })

    $(".sortList").sortable({
        connectWith: ".sortList"
    }).disableSelection();
});