将新项添加到未被刷新选取的 jQuery 可排序项

Question

我正在对对象列表进行排序，其中一些是常规对象，其中一些是其他对象的容器。

使用句柄排序工作正常，除了当我向容器添加新对象时，刷新后无法识别它。

我有以下 HTML：

<button>add another option</button>
<div class="con">
    <div class="ui-state-highlight"><span class="handle">handle</span> Item 1</div>
    <div class="ui-state-highlight"><span class="handle">handle</span> Item 2</div>
    <div class="ui-state-highlight"><span class="handle">handle</span> Item 3</div>
    <div class="subthing">
        <span class="handle">handle</span>
        <div>    <span class="handle">subhandle</span> subitem</div>
        <div>    <span class="handle">subhandle</span> subitem</div>
    </div>
</div>

和脚本：

$('button').click(function() {
    var x = $('<div class="ui-state-highlight"><span class="handle">handle</span> newthing</div>');
    x.appendTo('.con')
    $(".con").sortable('refresh')
});
var container = $(".con");
container.sortable({
    handle: container.children().children(".handle")
});​

小提琴

如上面的代码所示，如果您添加一个新项目，则无法将其与其他元素一起排序。我知道如果我说句柄属性是.handle，它会这样做，但我不希望子句柄成为可排序的一部分。

Answer 1

你需要的是：

container.sortable({
  handle: '> .handle'
});​

看看这个： http://jsfiddle.net/hQsjD/

它是仅捕获即时 .handle 子项的>符号。

句柄参数是字符串选择器而不是实际元素非常重要，因为调用刷新时不会刷新这些元素。

Answer 2

你去吧。您没有正确使用句柄：

$('button').click(function() {
    var x = $('<div class="ui-state-highlight"><span class="handle">handle</span> newthing</div>');
    x.appendTo('.con');
    $(".con").sortable("refresh");
});
var container = $(".con");
container.sortable({
    handle: ".handle"
});

小提琴

Answer 3

除了这个之外，什么都不适合我：

而不是：

$(".selector").sortable('refresh');

我把这个：

$(".selector").trigger("sortupdate");

Answer 4

这似乎已经解决了：编辑

$('button').click(function() {
    var x = $('<div class="ui-state-highlight"><span class="handle">handle</span> newthing</div>');
    //My Edits
    x.appendTo('.con')
    var container = $(".con");
    container.sortable({
        handle: container.children().children(".handle")
    });
});
    var container = $(".con");
container.sortable({
    handle: container.children().children(".handle")
});