jQuery 使用 Sortable 和动态添加的元素（实时刷新）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5468100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery using Sortable with dynamically added elements (live refresh)
提问by Pinkie
I have a <form id="#form">that have a <span class="con">and inside the span i have many divs that needs to be sortable.
我有一个<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>
I'm using the sortable function to make div Sortable.
我正在使用 sortable 函数使 div 可排序。
$("span").sortable({
connectWith: ".con"
}).disableSelection();
I'm dynamically adding with divs inside. But sortable is not recognizing newly added spans. I know there's a refreshoption for sortable that is supposed to work like live()and reognize newly added content, but i don't see how i can use it with this example.
我正在动态添加里面的 div。但是 sortable 无法识别新添加的跨度。我知道有一个refreshsortable 选项，它应该像live()新添加的内容一样工作并重新识别，但我不知道如何在这个例子中使用它。
Check http://jsfiddle.net/mRyVp/8/. Click on the button to add more spans with divs inside. You will see that you can sort div that were initially in DOM but not newly added ones.
检查http://jsfiddle.net/mRyVp/8/。单击按钮以添加更多包含 div 的跨度。您将看到您可以对最初在 DOM 中的 div 进行排序，但不能对新添加的 div 进行排序。
采纳答案by Santosh Linkha
It seems that you have class="connectedSortable"in
看来你已经class="connectedSortable"在
<span class="connectedSortable">
<div class="ui-state-highlight">Item 1</div>
<div class="ui-state-highlight">Item 2</div>
...
</span>
And connectWith: ".con"in
而connectWith: ".con"在
$("span").sortable({
connectWith: ".con"
}).disableSelection();
Adding conclass to original div will just be fine. Update here.
将con类添加到原始 div 就可以了。在这里更新。
回答by Nick
Try this:
尝试这个：
$('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();
When you click over 'add another option', the script will add new sortable 'Item' into the list
当您单击“添加另一个选项”时，脚本会将新的可排序“项目”添加到列表中
回答by Rahul Varadkar
Change Button Click event as given below, and it works. No other changes are required. I tried in jfiddler and it worked. Newly added items becomes part of list and are sortable as well.
如下所示更改按钮单击事件，它可以工作。不需要其他更改。我在 jfiddler 中尝试过，它奏效了。新添加的项目成为列表的一部分，也可以排序。
$('button').click(function() {
var x = $('<div>aaaaaaaaa</div>');
x.appendTo('#form .con')
});
I defined x as element and further x is appenedTo ".con" class inside #form.
我将 x 定义为元素，并进一步将 x 附加到 #form 中的“.con”类。
The screen-shot of this updated example is shown below:
此更新示例的屏幕截图如下所示：
