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

Question

我有两个可排序列表，其中一个包含一组项目。用户应该能够在这些列表之间进行排序。他们还应该能够创建新列表，他们还可以添加初始项目。所以可排序元素是静态的，但可排序列表是动态的。

前两个列表的可排序事件被触发并且工作正常。但是，问题在于动态添加的列表。添加它们没有问题，您可以将项目分类到其中。问题是事件的 none 被触发，例如 'receive' 或 'activate'，所以当我将一个元素拖到其中一个新列表时，我想获取列表的 id ，但它永远不会触发任何这些事件。

这是一个简单的 fiddle 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 添加到所有现有项目，但不包括未来项目。

我所做的更改将 .sortable(...) 包装在一个名为 refreshHooks() 的函数中，该函数在页面加载时运行并且每次单击 "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();
});

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

jQuery UI Sortable Widget dynamically added lists not triggering events

javascript

jquery

jquery-ui

jquery-ui-sortable