jQuery 使用带有动态添加元素的 Sortable(实时刷新)

Posted

技术标签:

【中文标题】jQuery 使用带有动态添加元素的 Sortable(实时刷新)【英文标题】:jQuery using Sortable with dynamically added elements (live refresh) 【发布时间】: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 进行排序。

【问题讨论】:

看来你有多个可排序的&lt;span&gt;,这肯定不会作为一个单独的组工作。 @experimentx,是的,您可以连接多个跨度。在此处查看示例jqueryui.com/demos/sortable/#event-update。由于 span 是动态添加的,因此它不起作用,否则如果最初都在 DOM 中,它将起作用。 @Hussein 看来你是对的,我再看看代码。 我以为refresh 应该刷新动态添加的内容,但它不起作用$('span').sortable('refresh') 你的&lt;span&gt;不应该是&lt;div&gt;吗?或者你的&lt;div&gt;s 是&lt;span&gt;s ? 【参考方案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 好吧,新创建的&lt;span&gt; 没有与之关联的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”类。

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

【讨论】:

以上是关于jQuery 使用带有动态添加元素的 Sortable(实时刷新)的主要内容,如果未能解决你的问题,请参考以下文章

如何动态添加带有引导表单元素的 div?

Jquery 怎么获取动态生成的html元素,然后给其中的元素添加样式

jquery 动态添加的元素 怎么删除元素

jquery 怎么获得动态添加后的子元素个数

带有动态错误消息的jquery验证添加方法[重复]

我使用jquery中的append方法,动态添加新的元素内容,新添加的元素上的onlick事件不起作用。