jQuery с использованием Sortable с динамически добавленными элементами (живое обновление)

Question

У меня есть <form id="#form">, у которого есть <span class="con">, а внутри промежутка у меня есть много div, которые нужно сортировать.

<form id="form">
    <span class="con">
        <div class="ui-state-highlight">Item 1</div>
        <div class="ui-state-highlight">Item 2</div>
        ... 
    </span>
</form>

Я использую сортируемую функцию, чтобы сделать Div Sortable.

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

Я динамически добавляю с divs внутри. Но сортируемый не признает вновь добавленные промежутки. Я знаю, что есть опция refresh для сортировки, которая должна работать как live() и распознавать только что добавленный контент, но я не понимаю, как использовать ее в этом примере.

Проверка http://jsfiddle.net/mRyVp/8/. Нажмите на кнопку, чтобы добавить больше промежутков с элементами div внутри. Вы увидите, что вы можете сортировать div, которые изначально были в DOM, но не были добавлены.

Answer 1

Кажется, что у вас есть class="connectedSortable" в

<span class="connectedSortable">
    <div class="ui-state-highlight">Item 1</div>
    <div class="ui-state-highlight">Item 2</div>
    ... 
</span>

И connectWith: ".con" в

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

Добавление класса con в исходный div будет просто замечательно.Обновление здесь .

Answer 2

Попробуйте это:

$('button').click(function() {
    var x = $('<div class="ui-state-highlight">Item '+($('.con div').length+1)+'</div>');
    x.appendTo('#form .con')
});

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

Когда вы нажимаете «добавить еще один параметр», скрипт добавляет новый сортируемый «Элемент» в список

Answer 3

Изменить событие нажатия кнопки, как указано ниже, и оно работает.Никаких других изменений не требуется.Я попробовал в jfiddler, и это сработало.Недавно добавленные элементы становятся частью списка и также могут быть отсортированы.

$('button').click(function() {
    var x = $('<div>aaaaaaaaa</div>');
    x.appendTo('#form .con')
});

Я определил x как элемент и далее x добавлен в класс ".con" внутри # формы.

Screen-снимок этого обновленного примера показан ниже: