将新项添加到jquery可排序,而不是通过刷新获取

使用句柄排序工作正常,除非我向容器添加新对象,刷新后无法识别.

我有以下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属性是.handle,它会这样做,但我不希望子句柄成为可排序的一部分.