jQuery ui - 克隆的代码不响应排序

Question

我正在处理一个需要从 DOM 中添加、删除和排序恒定 HTML 元素的页面。我有一个隐藏的 DIV，其中包含我使用 clone() 并将其附加到 DOM 的所有代码块。 sortable() 适用于 DOM 中已经存在的列表项，但不适用于 DOM 加载完成后注入的 DOM 列表项。我有以下列表，出于示例目的进行了简化：

<ul class="sprite-list">
    <li>
        <a href="#">
            <img src="icon.png">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="icon.png">
        </a>
    </li>
    <li class="sprite-add">
        <a href="#">Add</a>
    </li>
</ul>

我使用以下 jQuery 代码：

$('ul.sprite-list').sortable({
    items: 'li:not(.sprite-add)',
    containment: 'parent',
    opacity: 0.7
}).disableSelection();

将该列表硬编码在页面中，效果很好。但是在我将同一个列表克隆到 DOM 之后，我似乎无法拖放它们。

我已经阅读并看到了 working examples 的 sortable() 实时工作。我还看到人们推荐使用.sortable('refresh')。所以我尝试了

$('ul.sprite-list').sortable('refresh');

或

$.fn.sortable('refresh');

但都没有成功。我在这里错过了什么？

edit：我注意到在注入克隆代码后，列表确实具有所有可排序列表都具有的类 ui-sortable。

edit 2：我不知道它是否相关，但我使用单独的函数来获取克隆的元素：

function cloneElement(element){
    var container = $('#sprite-clone');

    if(element == 'generationContainer'){
        return container.find('.sprite-generation-container').clone(true);
    }
    else if(element == 'groupContainer'){
        return container.find('.sprite-group-container').clone(true);
    }
    else if(element == 'sprite'){
        return container.find('>li:first').clone(true);
    }
    else if(element == 'customForm'){
        return container.find('.customForm').clone(true);
    }
}

然后在需要时我使用 var generationContainer = cloneElement('generationContainer'); 我不确定这是否会影响任何事情。

Answer 1

好吧，工作示例代码不会克隆，而是添加新内容，所以它是另一回事。

由于我看不到其余的代码，所以我只是在推理。可以通过调用 sortable 来完成修复。因此，如果您要将可排序代码放入函数中，请在文档准备好时调用它，然后在添加元素时再次调用。

示例：http://jsfiddle.net/BWkFp/

HTML

<ul class="sprite-list">
    <li>
        test 1
    </li>
    <li>
        test 2
    </li>
    <li>
        test 3
    </li>
    <li class="sprite-add">
        <a href="#">Add</a>
    </li>
</ul>

JS

MakeUlSortable = function () {
    $('ul.sprite-list').sortable({
        items: 'li:not(.sprite-add)',
        opacity: 0.7
    }).disableSelection();
};

$(document).ready(function () {
    MakeUlSortable();
});

$('.sprite-add a').click(function () {
    $(this).before($('.sprite-list li:first-child').clone());
    MakeUlSortable();
    return false;
});

希望你明白我的意思。这段代码对我很有效:)