Jquery 可排序的动态内容

因此，我使用jQuery UI可排序插件对小图库中的照片进行排序

$(function() {
  $("#area").sortable({
    items: '.sort-wrapper',
    cursor: "move",
    handle: ".photo-handler",
    opacity: 0.5,
    scroll: true,
    scrollSensitivity: 100,
    scrollSpeed: 5,
    revert: 100,
    tolerance: "pointer",
    update : function () {
      var order = $('#area').sortable('serialize');
      $.ajax({
      type : 'POST',
      url : '/file.php',
      data : order
    });
  }
}).disableSelection();

在同一页上，我动态添加和删除照片。PHP脚本返回带有div的HTML代码，其中包含图像链接和按钮remove和move可排序处理程序

例如：

<div class="sort-wrapper">
  <a href="photo001.jpg"><img src="photo001m.jpg" alt=""></a>
  <button type="button" class="remove-this-photo">Remove</button>
  <button type="button" class="photo-handler">Move</button>
</div>

上面的代码使该区域再次可排序，但我必须再次复制所有设置以按我的方式进行配置。

---

如何绑定sortable以使其在加载动态内容后工作，或者如何在sortable外部存储所有设置并能够在同一页面上再次使用它？

如果向sortable元素添加新内容，则需要刷新初始化的实例。要执行此操作，请按如下方式调用：

.always(function() {
  $("#area").sortable('refresh');
});

---

我试过了，但没用。控制台中没有错误，没有警告。没有什么我认为问题可能是因为我没有使用任何函数向该区域添加/附加内容。动态内容来自PHP脚本，该脚本添加/删除文件，然后回显添加到用户正在编辑的相册中的所有照片HTML结构。我见过可排序的“刷新”示例，所有这些示例都是基于在JS/jQuery中使用append或类似函数添加内容。

.always(function() {
  $("#area").sortable('refresh');
});