jQuery UI Sortable Widgetイベントをトリガーしないリストを動的に追加しました

Question

私が持っているものは、2つのソート可能なリストがあり、そこに1つの項目が設定されています。ユーザーはこれらのリストを並べ替えることができます。 彼らはまた、新しいリストを作成することができなければなりません。彼らはまた、初期アイテムを追加することもできます。ソート可能な要素は静的ですが、ソート可能なリストは動的です。

ソート可能なイベントは、最初の2つのリストに対してトリガされ、正常に動作します。しかし、問題は動的に追加されたリストにあります。彼らは問題は一切加えられず、アイテムをそれらに分類することができます。問題は、イベントのどれも 'receive'や 'activate'のようにトリガされないので、新しいリストの1つに要素をドラッグすると、リストのIDを取得したいのですが、イベント。ここで

それの簡単なフィドル 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(...)コードは、既存のすべてのアイテムにソート可能ですが、将来のアイテムは追加できません。

refreshHooks()という関数で.sortable(...)をラップし、「Add New List」をクリックするたびにページが読み込まれ、再度実行されます。

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