Javascript jqueryui动态添加可排序组件

嗨，我在创建一个动态可排序列表时遇到了一个问题，我的想法是使用一个按钮来创建一个列表，该列表有一些选项，比如添加新项或在列表之间拖动它们，我有一个这样的主列表：

TL；博士： 从刚刚插入DOM中的ul创建并初始化新的可排序列表

<ul class="list-1">
 <li id="dynamic-id" class="first-level-items">
    - Some content -
 </li>
<ul>

这里一切正常，有一个操作需要添加更多。第一级项和工作正常，但在这些元素中是创建另一个列表的操作，在列表中是其他列表项，因此结构应该类似于：

<ul class="list-1">
 <li id="dynamic-id" class="first-level-items">
    <ul class="dynamic-list" id="dynamic-list-id">
       <li class="dynamic-generate-li">
          - content -
       </li>
    </ul>
 </li>
<ul>

我的构造函数函数：

createNewCategoryRow: function(parent,obj){
        var controller =this;
        var insertAfter = $('[data-parent-ul="'+parent+'"]');
        var element = "<li data-id='"+obj.uniqueId+"' id='"+obj.uniqueId+"' ><div class='row sub-title-inner' data-obj='"+obj.uniqueId+"'>" +
                          "<div class='cell cell-2 row-title '>"+
                            "<span class='span-title'><i> "+obj.value+" </i></span>"+
                          "</div>"+
                        "</div>";

            element +=  "<ul class='sort sort-"+obj.uniqueId+"' data-parent='"+obj.uniqueId+"'></ul>"+                      
                        "<div class='row bold title-total-child-inner'>"+
                          "<div class='cell cell-2 '>"+
                            "<span class='span-title'><strong> "+ obj.total.value+" </strong></span>"+
                          "</div>";

        for(var i = 0; i < obj.total.amounts.length; i++){
            element += "<div class='cell overflow-cell' id='"+ obj.total.amounts[i].uniqueId +"'>"+ obj.total.amounts[i].value  +"</div>";
        }                
            element += "</div></li>";

        insertAfter.append( element);
        insertAfter.sortable('refresh')

        //Here Everything works as expected


        //Here nope 
        //Initialize the new generate ul container Not working :(
        $('.sort-'+obj.uniqueId).sortable({
            placeholder: "ui-state-highlight",
            cancel: ".cancel-sort",
            axis: 'y',          

            update: function(e, ui) {
                $("ul.sort li").find('div.row').removeClass("gray");
                $('.sort-'+obj.uniqueId+" li:even").find('div.row').addClass("gray");
            },
            stop: function(e, ui) {
                var cctManager = Client.CCTManager.create();
                var idArr =  $.map($(this).children('li'), function(el) {
                                return el.id ;
                            })

                var me = ui.item.data('id'); 

                var position = idArr.indexOf(me);

                cctManager.dragCriteriaGroup(_workpage, me, position, function(newWorkpage){
                    controller.set('saved_workpage',newWorkpage);                   
                })


            }
        }).disableSelection();
    }

//为新列表容器创建项目列表

createNewCriteriaRow:function(id,obj){

        var insertAfter = $('[data-parent="'+id+'"]');
        var element = "<li  data-obj='"+obj.uniqueId+"' id='"+obj.uniqueId+"'>"+
                          "<div class='row'>"+
                            "<div class='cell cell-2 row-title'>"+
                              "<span class='span-title'>"+obj.value+"</span>"+
                            "</div>";

        for(var i = 0; i < obj.amounts.length; i++){
            element += "<div class='cell overflow-cell' data-obj='"+ obj.amounts[i].uniqueId +"'>"+ obj.amounts[i].value  +"</div>";
        }                           

        element += "</div></li>"

        insertAfter.append(element);
        //Until here everything works as expected

        //Here i'm trying to refresh the last created item and add some style to the childs, it add the childs but not refresh the sortable           
        console.log(id)
        $('.sort-'+id + 'location').find('div.row').removeClass("gray");
        $('.sort-'+id + 'li:even').find('div.row').addClass("gray");
        $('.sort-'+id).sortable( "refresh" );

    }

这两个元素在单击时都起作用

---

谢谢

如果您在JSFIDLE或jsbin中添加更多的代码，或者甚至在这里添加一个片段，使用您已经拥有的基本结构、按钮和所有东西，那么它可能会很有用。或者至少是一个到您工作站点的链接。好吧，这是一个示例，但不是真正的代码，因为它是用emberjs和Handlebar完成的，文件之间有3000行。但这就是想法，它有帮助吗？我想更多的是把它剥离到基本的东西。此外，您还有很多语法错误。请检查您的代码，并用css背景标记您试图创建的列表。此外，我仍然没有看到添加新列表的按钮。