jQuery UI Sortable Widget动态添加不触发事件的列表

以下是解决问题后对JS Fiddle的更新。 LINK!

这个 $(".connectedSortable").sortable(...) 块需要在 $('#add_new_list').click(...) 作用这个 .sortable(...) 代码将可排序添加到所有现有项,但不添加到未来项。

我所做的更改将 可排序(…) 在一个名为 refreshHooks() 它在页面加载时运行,每次单击“添加新列表”时都会再次运行。

$(document).ready(function () {

   function makeSortable(id) {
      console.log(id);
      $("#" + id).sortable({
         connectWith: ".connectedSortable",
         activate: function (event, ui) {
            console.log("activated list" + id);
         }}
      ).disableSelection();
   }    

   var list_counter = 2;

   $('#add_new_list').click(function () {
      $('#add_new_list').before($(
            '<ul id="list' + list_counter + '"' +
            ' class="connectedSortable"></ul>'
            ));

      var lists = {};
      lists.list_id = ['list' + list_counter];
      makeSortable(lists.list_id);
      list_counter++;

      refreshHooks();
   });

   function refreshHooks() {
      $(".connectedSortable").sortable({
         connectWith: '.connectedSortable',
         receive: function (event, ui) {
            var receivingID = ui.item.parent('ul').attr('id');
            console.log(receivingID);
         },
         activate: function (event, ui) {
            console.log("activated list");
         }
      }).disableSelection();
   }
   refreshHooks();
});