jQuery 使用带有动态添加元素的 Sortable（实时刷新）答案

【问题标题】：jQuery using Sortable with dynamically added elements (live refresh)jQuery 使用带有动态添加元素的 Sortable（实时刷新）
【发布时间】：2011-07-24 23:55:18
【问题描述】：

我有一个 <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>

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

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

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

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

【问题讨论】：

看来你有多个可排序的<span>，这肯定不会作为一个单独的组工作。
@experimentx，是的，您可以连接多个跨度。在此处查看示例jqueryui.com/demos/sortable/#event-update。由于 span 是动态添加的，因此它不起作用，否则如果最初都在 DOM 中，它将起作用。
@Hussein 看来你是对的，我再看看代码。
我以为refresh 应该刷新动态添加的内容，但它不起作用$('span').sortable('refresh')
你的<span>不应该是<div>吗？或者你的<div>s 是<span>s ？

标签： jquery jquery-ui refresh live jquery-ui-sortable

【解决方案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。

【讨论】：

感谢实验+1。但这有点尴尬。您正在使用 sortable 两次，一次在 click 函数内，一次在外面。我们应该只使用一次，然后使用刷新选项。
@Pikie 好吧，我再检查一遍。
@Pinkie 好吧，新创建的<span> 没有与之关联的sortable 函数，所以我们必须重新注册它（在它创建之后）否则它将无法工作。

【解决方案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();

当您点击“添加另一个选项”时，脚本会将新的可排序“项目”添加到列表中

【讨论】：

【解决方案3】：

如下所示的更改按钮单击事件，它可以工作。无需进行其他更改。我在 jfiddler 中尝试过，它奏效了。新添加的项目成为列表的一部分并且也可以排序。

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

我将 x 定义为元素，然后将 x 附加到 #form 中的“.con”类。

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

【讨论】：