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")
});​

小提琴

如上面的代码所示，如​​果您添加一个新项目，它不能与其余元素一起排序。我知道如果我说句柄属性是.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")
});