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. Просто удалите последний скрипт, и ваш пример будет работать.

EDIT:

При создании нового списка необходимо также настроить этот список, например:

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