jQuery 使用可排序和动态添加元素（实时刷新）

Question

我有一个

，它有一个 ，在跨度内我有很多 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>

我正在使用 sortable 函数使 div 可排序。

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

我正在动态添加里面的div。但可排序无法识别新添加的跨度。我知道有一个可排序的 refresh 选项，它应该像 live() 一样工作并重新识别新添加的内容，但我不知道如何将它与此一起使用例子。

检查http://jsfiddle.net/mRyVp/8/。单击该按钮可添加更多带有 div 的 Span。您将看到可以对最初在 DOM 中的 div 进行排序，但不能对新添加的 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 中就可以了。在此处更新。

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 附加到 #form 内的“.con”类。

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