jQuery通过ajax连接可排序追加新容器

Question

我有以下可排序的结构：

<div id="wrap">
  <ul class="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>

  <ul class="sortable">
    <li>Item 11</li>
    <li>Item 22</li>
    <li>Item 33</li>
    <li>Item 44</li>
  </ul>
</div>

和 javascript

  $(function() {
    $( ".sortable" ).sortable({
      connectWith: ".sortable"
    }).disableSelection();

    $("button").click(function() {
      $("<ul class=\"sortable\"> </ul>").appendTo("#wrap");
    });
  });

但是当我使用点击事件添加新列表时，它不会变成可排序的，并且不接受任何项目。

我也创建了jsbin：https://jsbin.com/xirehenubi/edit?html,js,output

Answer 1

您的 JSBin 示例的控制台抱怨 $.sortable 不是指示 JQueryUI 未正确初始化的函数。

原因是您包含jquery-1.11.3.js，然后是 JQueryUI，然后是 jquery-2.1.4.js。只需删除最后一个脚本，您的示例就可以工作了。

编辑：

当您创建新列表时，您还必须配置此列表，例如：

$("button").click(function() {
    var newList = $("<ul class=\"sortable ui-sortable\"> </ul>");
    newList.sortable({
        connectWith: ".sortable"
    }).disableSelection();
    $("<br>").appendTo("#wrap");
    newList.appendTo("#wrap");
});