Question

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

为最初的两个列表触发可排序事件并正常工作。但问题是动态添加的列表。他们添加没有问题，你可以将项目分类。问题在于没有触发任何事件，例如“接收”事件。或者＆＃39;激活＆＃39;，所以当我将一个元素拖到一个新列表中时，我想获得列表的id，但它永远不会触发任何这些事件。

这是一个简单的小提琴 JS Fiddle

这似乎永远不会在动态添加的列表上运行

IntVal 4

这是用户添加其他列表时运行的内容。

Answer 1

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

$(".connectedSortable").sortable(...)块需要在$('#add_new_list').click(...)函数的末尾运行。 .sortable(...)代码可以对所有现有项目进行排序，但不会对将来的项目进行排序。

我所做的更改将.sortable(...)包裹在一个名为refreshHooks()的函数中，该函数在页面加载时运行，并且每次都在＆＃34;添加新列表＆＃34;点击。

$(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可排序小部件动态添加列表不触发事件

1 个答案: