Я динамически добавляю таблицу с помощью 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();

Но снова дайте мне ту же ошибку. если я поместил код сортировки вне функции щелчка, не получил никакой ошибки, но сортировка не работает.

0
Gamul Mijo 10 Май 2018 в 23:06

1 ответ

Лучший ответ

Когда вы инициализируете виджет, он имеет доступ только к тому, что в данный момент находится в DOM. Если вы измените DOM, вам придется обновить виджет. https://api.jqueryui.com/sortable/#method-refresh

0
PoorlyWrittenCode 11 Май 2018 в 03:49