jQuery UI Sortable动态新增元素调用refresh报错的解决方案

解决方案 #

问题原因 #

报错本质是：refresh方法只能作用于已经完成sortable初始化的元素，你新增章节时动态生成的.sortable-lessons容器，在页面初始化时不存在，没有执行过初始化代码，直接调用refresh自然会抛出「未初始化就调用方法」的错误。

修复方案 #

只需要两步修改即可符合要求：

1. 把sortable的配置抽成公共变量，避免重复写配置代码
2. 新增章节后，只给当前新增的、未初始化的.sortable-lessons容器执行初始化，原有已经初始化的容器不受影响；新增课程后调用refresh识别新子项。
   修改后的核心代码如下：

// 抽离公共配置，统一管理
const sortableLessonConfig = {
  connectWith: ".sortable-lessons",
  placeholder: 'placeholder',
  items: "li:not(.unsortable)",
  forcePlaceholderSize: true,
  start: function( event, ui ) {
    $(ui.item).addClass("yellow");
  },
  stop: function(event, ui) {
    $(ui.item).removeClass("yellow");
  }
}

// 页面初始化：给已存在的.sortable-lessons初始化
$('.sortable-sections').sortable();
$('.sortable-lessons').sortable(sortableLessonConfig);

function addSection(id) {
  const item = '' +
    '<li class="section" id="' + id + '">' +
      '<span>section ' + id + ' <button class="add-lesson">Add lesson</button></span>' +
      '<ul class="sortable-lessons"></ul>' +
    '</li>';
  $('.sortable-sections').append(item);
  // 新增章节后，只给当前新增的.sortable-lessons做初始化，不影响原有实例
  $(`#${id} .sortable-lessons`).sortable(sortableLessonConfig);
}

function addLesson(sectionId, lessonId) {
  const section = $('#' + sectionId);
  const item = '<li class="lesson"><div class="border">lesson ' + lessonId + '</div></li>';
  section.find('ul.sortable-lessons').append(item);
  // 已初始化的容器新增子项后调用refresh，正常生效
  section.find('ul.sortable-lessons').sortable('refresh');
}

该方案不需要销毁原有实例，也不需要全量重复初始化所有容器，完全符合开发规范，可同时满足静态、动态生成的.sortable-lessons的排序需求。

内容的提问来源于stack exchange，提问作者Jarad