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 进行排序。
【问题讨论】:
看来你有多个可排序的<span>
,这肯定不会作为一个单独的组工作。
@experimentx,是的,您可以连接多个跨度。在此处查看示例jqueryui.com/demos/sortable/#event-update。由于 span 是动态添加的,因此它不起作用,否则如果最初都在 DOM 中,它将起作用。
@Hussein 看来你是对的,我再看看代码。
我以为refresh
应该刷新动态添加的内容,但它不起作用$('span').sortable('refresh')
你的<span>
不应该是<div>
吗?或者你的<div>
s 是<span>
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 好吧,新创建的<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”类。
此更新示例的屏幕截图如下所示:
【讨论】:
以上是关于jQuery 使用带有动态添加元素的 Sortable(实时刷新)的主要内容,如果未能解决你的问题,请参考以下文章