可用于动态表的 jQuery ui 排序

Question

我正在使用 JavaScript 动态添加表，但是当我调用 sortable 时，我不断收到 .sortable 不是函数的错误

<script src="{{ asset('dashboard/js/jquery.min.js')}}"></script>
<script src="{{ asset('dashboard/js/jquery-ui.min.js')}}"></script>



$("#ok").click(function(){
 showTable($("#table"+j),arraySeparate);

  $('.forsortable').sortable({
   handle: ".handle",
   axis: "y"
   });
});

function showTable(table,array){
var row, cell;
 for(var i=0; i<array.length; i++){
     row = $( '<tr />' );
     table.append( row );
     for(var j=-12; j<array[i].length; j++){
        if (j==-12 && array[i][4]=="قطار") {
            cell = $('<td><input type="text" class="form-control unit" value="1"></td>');
            row.append( cell );
        }else if(j==-10){
            cell = $('<td><input type="text" class="form-control unit building"></td>');
            row.append( cell );
        }else if (j<0) {
            cell = $('<td><input type="text" class="form-control unit"></td>');
            row.append( cell );
        }else if (j==4) {
            switch(array[i][j]) {
                case "قطار":
                    cell = $('<td><span class="label label-danger" style="font-size:16px;">'+array[i][j]+'</span></td>');
                    break;
                case "دعم":
                    cell = $('<td><span class="label label-success" style="font-size:16px;">'+array[i][j]+'</span></td>');
                    break;
                case "كسر":
                    cell = $('<td><span class="label label-warning" style="font-size:16px;">'+array[i][j]+'</span></td>');
                    break;
                case "تنظيف":
                    cell = $('<td><span class="label label-info" style="font-size:16px;">'+array[i][j]+'</span></td>');
                    break;        
                default:
                    cell = $('<td><span class="label" style="font-size:16px;">'+array[i][j]+'</span></td>');
            }
             row.append( cell );
        }else if (j==6) {
            cell = $('<td><div style="width: 11px; height:11px; background-image: url(https://dsae.innogamescdn.com/8.125/36907/graphic/sorthandle.png); cursor:pointer" class="handle " title="يمكنك تعديل ترتيب قائمة الإرساليات من خلال سحبها بالماوس إلى المكان المطلوب."> </div><a class="remove-command" onclick="deleteRow(this)" href="#"><img src="https://dsae.innogamescdn.com/8.125/36907/graphic/delete_small.png" title="حذف الإرسالية" alt="حذف"></a></td>');
            row.append( cell );
        }else if (j==5) {
            cell = $('<td><input type="text" class="form-control miliscond"></td>');
            row.append( cell );
        }else if (j==0){ 
            cell = $('<td>'+moment(array[i][j]).format("DD / MM / YYYY  HH:mm:ss")+'</td>');
            row.append( cell );
         }else{
            cell = $('<td>'+array[i][j]+'</td>');
            row.append( cell );
         }

    }
 }
}

如果我使用静态表，jquery-ui sortable 可以完美运行。 我尝试用这个替换可排序的函数：

$('.forsortable').sortable();
$('.forsortable').disableSelection();

但再次给我同样的错误。 如果我将可排序的代码放在点击功能之外，没有得到任何错误但可排序不起作用。

Answer 1

当您初始化一个小部件时，它只能访问当前在 DOM 中的内容。如果你改变 DOM，你将不得不刷新小部件。 https://api.jqueryui.com/sortable/#method-refresh