jQuery UI sortable对动态生成表格不生效问题咨询

API 探路者

2026-8-30

问题原因

你在DOM就绪回调里执行的$('table').sortable()，只会对执行当下已经存在于页面DOM树中的table元素生效，完成sortable拖拽功能的初始化。后续通过JS动态生成插入的表格，没有执行过sortable初始化逻辑，自然不会具备拖拽排序能力。
另外你的现有代码还有一个逻辑问题：点击按钮时使用$('#main').html(content)会直接覆盖#main容器内的所有原有内容，包括初始渲染的表格、触发生成操作的按钮，会导致按钮点击一次后就从页面消失。

修复方案

调整新表格的插入逻辑，把覆盖容器内容的.html()方法改为追加内容的.append()方法，避免误删原有页面元素。
每次把新生成的表格插入DOM之后，针对这个新表格单独调用.sortable()方法完成初始化。

修正后的some.js代码如下：

// 页面初始加载完成后，给已存在的表格绑定sortable拖拽能力
$(function(){
  $('table').sortable();
});

// 绑定按钮点击事件生成新表格
$(document).on('click','#test',function(){
  // 用模板字符串定义表格结构，避免多行字符串转义问题
  const tableStr = `<table>
               <tr>
                 <td>1</td>
                 <td>2</td>
               </tr>
               <tr>
                 <td>3</td>
                 <td>4</td>
               </tr>
             </table>`;

  const newTable = $.parseHTML(tableStr);
  // 追加新表格到容器，不覆盖原有内容
  $('#main').append(newTable);
  // 给新插入的表格初始化sortable功能
  $(newTable).filter('table').sortable();
});