jQuery SortableJS – 如何在通过 Ajax 刷新元素后让它工作？

Question

我指的是 jQuery 插件 SortableJS (https://github.com/SortableJS/Sortable)。

我已经用这个 jQuery 代码设置了一个非常直接的用法：

$('.details').sortable({
  sort: true, 
  animation: 250, 
  handle: '.handle', 
  draggable: '.item', 

  onEnd: function (e) {
    var item = $(e.item);
    var index = $(e.newDraggableIndex)[0];

    $.post('/planning/move_item', { id: item.data('id'), index: index } );
  }
});

底层的HTML不值一提。一个带有一堆子项 (.item) 的容器 (.details)。一切都很好。

现在我添加了向容器添加新项目的功能。我已经使用 ajax 完成了此操作，因此容器会在显示新内容后重新加载：

$('.details').load(window.location.pathname + ' .details > *'

问题是，在重新加载容器后，排序不再起作用。我猜重新加载后必须重新初始化 Sortable。

我对良好的实践代码感兴趣，以使其正常工作。

我尝试的是将 jQuery 代码放入一个函数中，然后在页面加载时以及 ajax 之后重新加载时调用该函数。这在技术上是可行的。但看起来很糟糕。我确信有更好的方法来做到这一点。

感谢您的帮助。