jquery - 将新项目添加到 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")
});​

The Fiddle

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

Answer 1

您需要的是:

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

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

> 符号仅捕获直接的 .handle 子级。

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