jQuery UI 添加新元素后可排序刷新不起作用

jQuery UI sortable refresh doesn't work after appending new element

因此,一旦我附加了一个新的元素列表,它们就不再可排序。我已经尝试使用 sortable("refresh") 但它仍然不起作用。

$(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/。如您所见,如果您单击该按钮,则会添加一个新列表。但是您不能 sort/drag 并将其项目拖放到其他列表中。

我希望附加列表中的项目可以拖放。也可排序。

第一次尝试,追加列表时添加排序。

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