jQuery UI Sortable Widget динамически добавленные списки, не вызывающие события

Question

У меня есть два сортируемых списка, в которых один заполняется набором элементов. Пользователи должны иметь возможность сортировать эти списки. Они также должны иметь возможность создавать новые списки, которые они также могут добавлять в свои элементы. Таким образом, сортируемые элементы являются статическими, но сортируемые списки являются динамическими.

Сортируемые события запускаются для первых двух списков и работают нормально. Однако проблема связана с динамически добавленными списками. Они добавляются без проблем, и вы можете сортировать элементы в них. Проблема в том, что ни одно из событий не запускается, например «получать» или «активировать», поэтому, когда я перетаскиваю элемент в один из новых списков, я хочу получить идентификатор списка, но он никогда не запускает ни один из этих Мероприятия.

Вот простой скрипку его JS Fiddle

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

Это никогда, кажется, работает на динамически добавленные списки

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

Это то, что запускается, когда пользователь добавляет еще один список.

Answer 1

Это обновление для вашего JS Fiddle с устраненной проблемой. LINK!

Блок $(".connectedSortable").sortable(...) должен быть запущен в конце функции $('#add_new_list').click(...). Код .sortable(...) добавляет сортировку ко всем существующим элементам, но не будущим элементам.

Изменения, которые я сделал, обернули .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(); 
});