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可排序。

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

我在里面动态添加div。但是sortable不承认新添加的跨度。我知道有一个refresh选项可以排序，它应该像live()一样工作并重新识别新添加的内容，但我不知道如何在这个例子中使用它。

检查http://jsfiddle.net/mRyVp/8/ 。单击按钮以添加更多内部div的跨度。您将看到您可以对最初在DOM中但不是新添加的div进行排序。

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中就可以了。更新here。

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被追加到＃34; .con＆＃34; #form内的课程。

此更新示例的屏幕截图如下所示：