Question

您好我在创建动态可排序列表时遇到问题，想法是有一个按钮来创建列表，列表有一些选项，如添加新项目或在列表之间拖动它，我有一个主要这样的列表：

TL; DR： 从刚刚插入DOM中的ul创建并初始化一个新的可排序列表

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

在那里一切正常，有一个动作可以添加更多＆＃34; .first-level-item＆＃34;并且工作正常，但在这些元素内部和动作创建另一个列表并在列表中列出其他列表项，因此结构应该是这样的：

<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();
    }

//为新列表容器创建项目列表（ul）

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" );

    }

这两个元素都适用于点击。

由于

jqueryui动态添加可排序组件

0 个答案: