jQuery UI 可排序重繪錯誤 - 如何重繪動態添加的可排序元素？

在 gif 中：

頁面加載初始化我的可排序代碼（如下）
添加部分按鈕（與此問題無關）
向該部分添加課程（動態，頁面加載時元素不存在，重要！）
該課程不可排序，因為它是動態創建的
在控制臺中，我多余地粘貼了整個可排序的初始值設定項
課程變得可排序（根據需要）

我的問題：

創建動態元素時，如何正確“重繪 ”或為新元素提供已初始化的可排序項所具有的所有屬性和事件（選項？）。

我的 GIF 最簡單的 HTML 偽代碼：

<div>
  <ul class="sortable-sections">
    <li class="section">
      <ul class="sortable-lessons">
        <li>Item 1</li>
      </ul>
    </li>
  </ul>
</div>

有沒有辦法說（使用 jQuery），“在頁面加載時加載的任何專案或使用類動態創建的sortable-lessons專案都是可排序的專案”。？

我的可排序代碼：

$('.sortable-lessons').sortable({
        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( "refresh" );

但這會引發錯誤，我不知道為什么。

錯誤：

jquery.min.js:2 Uncaught Error: cannot call methods on sortable prior to initialization;
  attempted to call method 'refresh'
    at Function.error (jquery.min.js:2)
    at HTMLUListElement.<anonymous> (jquery-ui.min.js:6)
    at Function.each (jquery.min.js:2)
    at S.fn.init.each (jquery.min.js:2)
    at S.fn.init.t.fn.<computed> [as sortable] (jquery-ui.min.js:6)
    at <anonymous>:1:26

從字面上看，重繪檔案似乎表明這正是該("refresh")方法的用途：

重繪（）

重繪可排序的專案。觸發所有可排序專案的重新加載，從而識別新專案。此方法不接受任何引數。代碼示例：呼叫 refresh 方法：
$( ".selector" ).sortable( "refresh" );

我發現的一個簡單愚蠢的解決方案（使用 jQuery UI 可排序插件添加專案后重繪串列）提到只需再次執行整個可排序初始化程式。當然，這是錯誤的做法。我想以正確的方式做到這一點。

Others call destroy on the original, then rebuild it again. Again, doesn't seem like the right way.

EDIT / UPDATE Reproducible Example

let sectionId = 1;
let lessonId = 1;

$('.sortable-sections').sortable();
$('.sortable-lessons').sortable({
  connectWith: ".sortable-lessons",
  items: "li",
});

function addSection(id) {
  const item = ''  
    '<li  id="'   id   '">'  
      '<span>section '   id   ' <button >Add lesson</button></span>'  
      '<ul ></ul>'  
    '</li>';
  $('.sortable-sections').append(item);
}

$('body').on('click', '#add-section', function () {
  addSection(sectionId);
  sectionId =1;
});

function addLesson(sectionId, lessonId) {
  const section = $('#'   sectionId);
  const item = '<li ><div >lesson '   lessonId   '</div></li>';
  section.find('ul.sortable-lessons').append(item);
  $('.sortable-lessons').sortable('refresh');
}

$('body').on('click', '.add-lesson', function () {
  const section_id = $(this).closest('.section').attr('id');
  addLesson(section_id, lessonId);
  lessonId =1;
});

.border {
  border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div>
    <button id="add-section">Add Section</button>
    <ul class="sortable-sections">
    </ul>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</body>
</html>

But that example is starting from scratch when NO sections or lessons exist.

Here's an example when SOME sections and lessons exist.

Add a new section
Try to add a new lesson in that section

let sectionId = 7;
let lessonId = 12;

$('.sortable-sections').sortable();
$('.sortable-lessons').sortable({
  connectWith: ".sortable-lessons",
  items: "li",
});

function initializeSortableLessons() {
  $('.sortable-lessons').sortable({
    connectWith: ".sortable-lessons",
    items: "li",
  });
}


function addSection(id) {
  const item = ''  
    '<li  id="'   id   '">'  
      '<span>section '   id   ' <button >Add lesson</button></span>'  
      '<ul ></ul>'  
    '</li>';
  $('.sortable-sections').append(item);
}

$('body').on('click', '#add-section', function () {
  addSection(sectionId);
  sectionId =1;
});

function addLesson(sectionId, lessonId) {
  const section = $('#'   sectionId);
  const item = '<li ><div style="border: 1px solid black;">lesson '   lessonId   '</div></li>';
  section.find('ul.sortable-lessons').append(item);
  $('.sortable-lessons').sortable('refresh');
}

$('body').on('click', '.add-lesson', function () {
  const section_id = $(this).closest('.section').attr('id');
  addLesson(section_id, lessonId);
  lessonId =1;
});

.border {
        border: 1px solid black;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

  <div>
    <button id="add-section">Add Section</button>
    <ul class="sortable-sections ui-sortable">
      <li class="section" id="1"><span>section 1 <button class="add-lesson">Add lesson</button></span><ul class="sortable-lessons"></ul></li><li class="section" id="2"><span>section 2 <button class="add-lesson">Add lesson</button></span><ul class="sortable-lessons"><li class="lesson"><div style="border: 1px solid black;">lesson 1</div></li></ul></li><li class="section" id="3"><span>section 3 <button class="add-lesson">Add lesson</button></span><ul class="sortable-lessons"></ul></li><li class="section" id="4"><span>section 4 <button class="add-lesson">Add lesson</button></span><ul class="sortable-lessons"><li class="lesson"><div style="border: 1px solid black;">lesson 1</div></li></ul></li><li class="section" id="5" style=""><span>section 5 <button class="add-lesson">Add lesson</button></span><ul class="sortable-lessons"><li class="lesson"><div style="border: 1px solid black;">lesson 1</div></li><li class="lesson"><div style="border: 1px solid black;">lesson 1</div></li><li class="lesson"><div style="border: 1px solid black;">lesson 1</div></li><li class="lesson"><div style="border: 1px solid black;">lesson 1</div></li></ul></li><li class="section" id="6" style=""><span>section 6 <button class="add-lesson">Add lesson</button></span><ul class="sortable-lessons"><li class="lesson"><div style="border: 1px solid black;">lesson 1</div></li><li class="lesson"><div style="border: 1px solid black;">lesson 1</div></li><li class="lesson"><div style="border: 1px solid black;">lesson 1</div></li><li class="lesson"><div style="border: 1px solid black;">lesson 1</div></li><li class="lesson"><div style="border: 1px solid black;">lesson 1</div></li></ul></li></ul>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</body>
</html>

uj5u.com熱心網友回復：

考慮以下。您必須將 new 初始化<ul>為 Sortable。這樣，當您添加<li>和呼叫refresh它時，它已經被初始化為一個 Sortable。

$(function() {

  function addLesson(event) {
    var section = $(this).closest("li");
    var item = $("<li>", {
      class: "lesson"
    });
    $("<div>").css("border", "1px solid black").html("Lesson "   ($(".lesson").length   1)).appendTo(item);
    $('ul.sortable-lessons', section).append(item).sortable('refresh');
  }

  function addSection(props, target) {
    var item = $("<li>", props);
    $("<span>").html("Section "   props.id   " ").appendTo(item);
    $("<button>", {
      class: "add-lesson"
    }).html("Add Lesson").appendTo($("span", item));
    $("<ul>", {
      class: "sortable-lessons"
    }).appendTo(item).sortable({
      connectWith: ".sortable-lessons"
    });
    if (target === undefined) {
      item.appendTo($(".sortable-sections"));
      $(".sortable-sections").sortable("refresh");
    } else {
      item.appendTo(target);
      if ($(target).hasClass("ui-sortable")) {
        $(target).sortable("refresh");
      }
    }
  }

  $('.sortable-sections').sortable();
  $('.sortable-lessons').sortable({
    connectWith: ".sortable-lessons"
  });

  $('body').on('click', '#add-section', function() {
    addSection({
      id: $(".section").length   1
    });
  });

  $('body').on('click', '.add-lesson', addLesson);
});

.border {
  border: 1px solid black;
}

<div>
  <button id="add-section">Add Section</button>
  <ul class="sortable-sections ui-sortable">
    <li class="section" id="1"><span>section 1 <button class="add-lesson">Add lesson</button></span>
      <ul class="sortable-lessons"></ul>
    </li>
    <li class="section" id="2"><span>section 2 <button class="add-lesson">Add lesson</button></span>
      <ul class="sortable-lessons">
        <li class="lesson">
          <div style="border: 1px solid black;">lesson 1</div>
        </li>
      </ul>
    </li>
    <li class="section" id="3"><span>section 3 <button class="add-lesson">Add lesson</button></span>
      <ul class="sortable-lessons"></ul>
    </li>
    <li class="section" id="4"><span>section 4 <button class="add-lesson">Add lesson</button></span>
      <ul class="sortable-lessons">
        <li class="lesson">
          <div style="border: 1px solid black;">lesson 1</div>
        </li>
      </ul>
    </li>
    <li class="section" id="5" style=""><span>section 5 <button class="add-lesson">Add lesson</button></span>
      <ul class="sortable-lessons">
        <li class="lesson">
          <div style="border: 1px solid black;">lesson 1</div>
        </li>
        <li class="lesson">
          <div style="border: 1px solid black;">lesson 1</div>
        </li>
        <li class="lesson">
          <div style="border: 1px solid black;">lesson 1</div>
        </li>
        <li class="lesson">
          <div style="border: 1px solid black;">lesson 1</div>
        </li>
      </ul>
    </li>
    <li class="section" id="6" style=""><span>section 6 <button class="add-lesson">Add lesson</button></span>
      <ul class="sortable-lessons">
        <li class="lesson">
          <div style="border: 1px solid black;">lesson 1</div>
        </li>
        <li class="lesson">
          <div style="border: 1px solid black;">lesson 1</div>
        </li>
        <li class="lesson">
          <div style="border: 1px solid black;">lesson 1</div>
        </li>
        <li class="lesson">
          <div style="border: 1px solid black;">lesson 1</div>
        </li>
        <li class="lesson">
          <div style="border: 1px solid black;">lesson 1</div>
        </li>
      </ul>
    </li>
  </ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/339470.html

標籤：jquery jquery-ui jquery-ui-sortable

上一篇：計算機網路PPT總結-第一章

下一篇：C語言--getchar和putchar函式和它們的一些例子

jQueryUI可排序重繪錯誤-如何重繪動態添加的可排序元素？

EDIT / UPDATE Reproducible Example

But that example is starting from scratch when NO sections or lessons exist.