Javascript 无法在ajax内容更新后重新调整可排序的内容

我正在使用

Sortable

来组织父组内部的列表，父组本身也是可排序的，类似于其上的多示例，但带有文本。这很好，使用的代码大致如下：

var globObj = {};

function prepSortCats() {

    globObj.subCatsGroup = [];

    // Changing parent group order

    globObj.sortyMainCats = Sortable.create(catscontainer, {
        // options here omitted from example
        onUpdate: function( /**Event*/ evt) {
            // Send order to database. Works fine.
        }
    });

    // Changing sub list order

    globObj.subCatsGroup.forEach.call(document.getElementById('catscontainer').getElementsByClassName('subcatlist'), function(el) {
        var sortySubCats = Sortable.create(el, {
            // options here from example
            onUpdate: function( /**Event*/ evt) {
                // Send order to database. Works fine.
            }
        });
    });

}

当使用以下命令加载页面时调用：

$(document).ready(function () {
    // Sortable
    prepSortCats();
});

到目前为止一切都很好。但是，用户可以将新元素引入任何列表（子列表或父列表）。简而言之，用户添加的任何新元素都首先添加到数据库中，然后使用

ajax

刷新页面的相关部分，从数据库中提取更新的内容并显示出来。用户看到他们新添加的项目添加到现有列表之一<代码>Ajax调用如下：

function refreshCategories() {
    var loadUrl = "page that pulls lists from database and formats it";
    $("#catscontainer")
        .html(ajax_load)
        .load(loadUrl);
    return false;
};

这也行。除此之外，

Sortable

不再有效。我不能拖动任何列表。我的第一个想法是销毁现有的可排序的实例并重新初始化它们。在我调用

refreshCategories（）

之后，我调用以下命令：

if(globObj.sortyMainCats.length !== 0) {
    globObj.sortyMainCats.destroy();
}

if(globObj.subCatsGroup.length !== 0) {
    var i;
    for (i = globObj.subCatsGroup.length - 1; i >= 0; i -= 1) {
        globObj.subCatsGroup[i].destroy();
        globObj.subCatsGroup.splice(i, 1);
    }
}

prepSortCats();

但是

Sortable

仍然没有效果。我引入了全局对象（尽管有争议），这样我就可以针对

可排序的

实例，但我似乎忽略了一些东西。有什么想法吗？抱歉没有提供一个有效的例子。当我对服务器进行各种

ajax

调用时，我认为这在这里是不可能的

更新 我显然误解了正在发生的一些行动。首先，我应该说我错过了通过

aja

x使用

refreshCategories（）。这在很大程度上是能够对子列表进行排序的第二个操作，我注意到子列表已经被破坏，并且仍然如此

但它确实指出，尽管整个
$（“#catscontainer”）
被更新版本的列表（以及它所包含的全部列表元素）所取代，
可排序的
仍然有一些实例在其上运行。我的理解是，它与被移除的元素有某种联系。现在，我对如何获得可排序性有点迷茫：（a）从页面上从头开始，执行
prepSortCats（）
就好像它是一个新的页面加载，并删除以前的
Sortable
实例，或者（b）获得剩余的
Sortable
实例，在调用
ajax
以识别添加的元素之后

更新2
取得一些进展

通过反复试验，我发现在调用
refreshCategories（）
之后，调用
globObj.sortyMainCats.destroy（）
甚至会阻止对组列表进行排序。然后，如果在此之后调用
prepSortCats（）
，我可以再次移动它们。但不是子列表

这不是结论，但看起来我正在成功地销毁和重新初始化
可排序的
，这是我的目标，但是
ajax
加载的元素的某些方面不适用于
可排序的
我在错误的地方寻找答案，确保这是由于
ajax
加载了内容，并且dom与
Sortable
预期的内容存在一些不一致的问题

原来这是一个异步问题。或者，简单地说，
ajax
加载的页面部分在
Sortable
被要求重新斜体化时还没有准备好

对于有同样问题的人，我改变了：

$("#catscontainer")
    .html(ajax_load)
    .load(loadUrl);

到

其中，
reinitSortable（）
只是一个函数，它触发
destroy
和
prepSortCats（）
函数，类似于上面的显示方式

$("#catscontainer")
    .html(ajax_load)
    .load(loadUrl, function() {
         reinitSortable();
    });