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

标签 javascript jquery jquery-ui jquery-ui-sortable

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

最初的两个列表会触发可排序事件,并且工作正常。然而,问题在于动态添加的列表。添加它们没有问题,您可以将项目分类到其中。问题是没有触发任何事件,例如“接收”或“激活”,因此当我将元素拖动到新列表之一时,我想获取列表的 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();   }

这是当用户添加另一个列表时运行的内容。

最佳答案

这是 JS Fiddle 的更新,已解决问题。 LINK!

$(".connectedSortable").sortable(...) block 需要在 $('#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();
});

关于javascript - jQuery UI Sortable Widget动态添加列表不触发事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37369684/

相关文章:

jquery - 如何使用 jquery 更改标签标签内的文本

javascript - 在 jquery 选项卡中查找 span 标签并返回该索引

javascript - 在 jQueryUI 可排序小部件中,如何在 start 方法中执行取消操作

jQuery UI 在 TH 中可调整大小

javascript - 在 symfony2 中使用 viewer.js 插件

javascript - 仅限 Firefox/IE - gif 动画在 element show() jquery 之后卡住

javascript - 并非所有 d3 点都显示在传单 map 上的正确位置

javascript - 有没有办法为每个 AJAX 页面加载初始化 JS SDK?

javascript - jquery 滚动限制。?

javascript - Meteor session 设置/获取强制 html 重新呈现