动态生成表格调用jQuery UI Sortable报错：.sortable不是函数

看起来你遇到的核心问题是动态生成DOM元素后，jQuery UI的sortable方法无法正确绑定，或者出现方法不存在的错误，结合你描述的静态表格正常、动态表格报错的情况，我帮你梳理几个关键的排查和解决步骤：

1. 先确认jQuery与jQuery UI的加载顺序和重复加载问题 #

这是最常见的导致.sortable is not a function错误的原因：

• 必须先加载jQuery，再加载jQuery UI，因为jQuery UI是依赖jQuery的扩展，顺序反了就会导致sortable方法无法挂载到jQuery对象上。
• 检查页面中是否有重复加载jQuery的情况（比如其他脚本又引入了一次jquery.min.js），重复加载会覆盖之前的jQuery实例，导致已经绑定的jQuery UI方法丢失。

你当前的脚本引入顺序看起来是对的，但可以再确认下页面其他位置有没有额外的jQuery引入：

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

2. 确保动态表格渲染完成后再初始化Sortable #

虽然你是在点击事件里调用sortable，但要确保showTable函数已经完全把表格元素添加到DOM中，再执行sortable初始化。可以把sortable的初始化逻辑放到showTable函数的末尾，或者通过独立函数调用的方式确保DOM已就绪：

修改你的点击事件和相关函数：

$("#ok").click(function(){
    // 先渲染表格
    showTable($("#table"+j), arraySeparate);
    // 确保表格已插入DOM后初始化sortable
    initSortable();
});

function showTable(table, array){
    var row, cell;
    // 清空表格原有内容（避免重复添加行）
    table.empty();
    for(var i=0; i<array.length; i++){
        row = $( '<tr />' );
        table.append( row );
        // ... 你的单元格生成逻辑保持不变 ...
    }
}

function initSortable(){
    // 先销毁可能存在的sortable实例，避免重复初始化报错
    $('.forsortable').sortable('destroy').sortable({ 
        handle: ".handle", 
        axis: "y" 
    }).disableSelection();
}

3. 确认选择器.forsortable指向正确的元素 #

jQuery UI的Sortable通常需要作用在表格的<tbody>元素上（而不是<table>本身），所以要确保你的.forsortable类是加在<tbody>上，而不是外层的<table>。比如：

<table>
    <tbody class="forsortable">
        <!-- 动态生成的tr在这里 -->
    </tbody>
</table>

如果你的.forsortable是加在<table>上，可能会导致sortable无法正确识别可排序的行元素，调整选择器到tbody即可解决。

4. 排查是否存在其他脚本冲突 #

如果上面的步骤都没问题，可以检查页面中是否有其他jQuery插件（比如Bootstrap的JS部分）和jQuery UI存在冲突，尤其是如果其他插件也修改了jQuery的原型方法。可以尝试暂时禁用其他非必要的脚本，看sortable是否能正常工作。

按照这几个步骤排查下来，应该就能解决你遇到的动态表格sortable报错或失效的问题了。

内容的提问来源于stack exchange，提问作者Gamul Mijo