Javascript 动态添加项的jQuery UI可排序

我有一个HTML标记，通过点击AddRow按钮，一个视觉上隐藏的HTML元素被克隆并插入到它之前，它与AddNewButton是同级的

<div class='wrapper'>
<div class="container">
    <div class="sortable">
        <div class="ui-state-default">
            <div class="container">
                <div class="sortable">
                    <div class="ui-state-default">Item 1</div>
                    <div class="ui-state-default">Item 2</div>
                    <div class="ui-state-default hidden">Hidden</div> <a href="#" class="add-button"> Add New Sub </a>

                </div>
            </div>
        </div>
        <div class="ui-state-default hidden">
            <div class="container">
                <div class="sortable">
                    <div class="ui-state-default">Item 1</div>
                    <div class="ui-state-default">Item 2</div>
                    <div class="ui-state-default hidden">Hidden</div> <a href="#" class="add-button"> Add New Sub </a>

                </div>
            </div>
        </div> <a href="#" class="add-button"> Add New </a>

    </div>
</div>

下面是一个例子，让我更清楚地了解我正在尝试做什么

运行JSFIDLE时，单击AddNew按钮，对于新添加的元素，尝试对元素项1和项2进行排序。虽然可以拖动，但不能排序

---

注意：div.ui-state-default元素可以包含任何深度级别的div.container元素（嵌套的可重复字段组）

你让事情变得比需要的更复杂了。与其尝试进行深度克隆（

.clone（true）

），只需调用克隆项上的

sortableInit（）

---

请在您的问题中发布您的代码，在发布到JSFIDLE的链接时，不要试图回避这样做的规则。您在发布问题时看到了警告，但您选择忽略它。@j08691我已用代码更新了问题。我可以对它们进行排序，所以您使用的是哪种浏览器？@jiFus我已尝试使用chrome和firefox的最新版本。您是否单击了添加新链接（不是添加新子项）以添加新行？嗯……如果不执行深度克隆，现有功能可能会中断。但是，我要试试这个，如果可能的话，重构现有的代码。@Chetan–如果你愿意，你可以离开深度克隆。在您的示例中，这是不必要的，但如果它在其中，则不会发生任何损坏。好吧，它不适用于深度克隆。既不在示例代码中工作，也不在实际实现中工作。但是，幸运的是，在实际实现中尝试了没有深度克隆，并且没有任何东西被破坏。我已经在div.wrapper等价物上绑定了事件，并且正在使用事件委派，所以这已经是不必要的了。顺便说一句，如果对已经初始化的元素调用jquery ui sortable是否会破坏现有实例？@Chetan–不，它不会破坏现有实例，但与其他任何操作一样，请确保不会用后续引用覆盖初始引用。

function sortableInit(container) {
container.find('.sortable').sortable({
    axis: 'y',
    cursor: 'move',
    items: '> .ui-state-default',
});
}
$(function () {
$(".container").each(function () {
    sortableInit($(this));
});
$('.wrapper').on('click', '.add-button', function (e) {
    e.preventDefault();
    e.stopPropagation();
    var hidden = $(e.target).siblings('.hidden').clone(true).removeClass('hidden');
    hidden.insertBefore($(e.target));
});
});

$('.wrapper').on('click', '.add-button', function (e) {
    e.preventDefault();
    e.stopPropagation();
    var hidden = $(e.target).siblings('.hidden').clone().removeClass('hidden'); //Removed 'true' from clone
    hidden.insertBefore($(e.target));
    sortableInit(hidden); //This added.
});