jQuery拖拽排序表格行未保存跳转未触发离开提示的解决方法

你之前的代码存在几个基础错误，修正后即可实现预期效果，先列问题点：

• 选择器大小写不匹配：初始代码表格id是tbllookup1，后续修改时误写为tblLookup1，导致jQuery无法选中目标元素，脏标记逻辑完全不生效
• 拖拽事件绑定错误：receive事件仅在跨列表拖拽元素时触发，同表格内拖拽排序完成后触发的是update事件，之前的逻辑根本不会在同表拖拽后标记修改状态
• API大小写错误：addclass/removeclass/droponempty都没有用驼峰写法，JS和jQuery UI对大小写敏感，导致选中样式、空容器放置配置都不生效
• DOM操作逻辑错误：receive回调里写$(this).find("tbody").append(ui.item)是无效的，因为sortable初始化在tbody元素上，this本身就是tbody，不存在子级tbody，直接追加元素即可
• 浏览器安全限制说明：从Chrome 51、Firefox 44版本开始，beforeunload事件不再支持展示自定义提示文案，所有返回的自定义字符串都会被替换为浏览器内置的统一提示，这个是W3C规范层面的安全限制，没有办法绕过
• 提交状态逻辑缺失：原代码没有在点击Update提交按钮时正确清除脏标记，导致正常提交表单时也会误触发离开提示

完整可运行代码 #

$(function () {
    // 初始化修改标记，默认未修改
    let isTableDirty = false;

    // 正确初始化表格拖拽排序
    $("#tbllookup1 tbody").sortable({
        items: 'tr',
        cursor: 'pointer',
        axis: 'y',
        dropOnEmpty: false,
        start: function (e, ui) {
            ui.item.addClass("selected");
        },
        stop: function (e, ui) {
            ui.item.removeClass("selected");
        },
        // 同列表拖拽排序完成后触发，标记为已修改
        update: function (e, ui) {
            isTableDirty = true;
        },
        // 跨列表拖入行也属于修改，标记为已修改
        receive: function (e, ui) {
            $(this).append(ui.item);
            isTableDirty = true;
        }
    });

    // 点击Update提交按钮时，清除修改标记，避免提交时触发提示
    $('#btnSave').on('click', function () {
        isTableDirty = false;
        // 原有提交逻辑myFunction()可正常在此调用
        // myFunction();
    });

    // 监听页面离开事件
    window.addEventListener('beforeunload', function (e) {
        if (isTableDirty) {
            // 现代浏览器会忽略自定义文案展示默认提示，但必须做以下设置才能弹出确认框
            e.preventDefault();
            e.returnValue = '是否要在离开前保存更改？';
            return '是否要在离开前保存更改？';
        }
    });
});

补充说明：如果你的页面是单页应用，前端路由切换不会触发beforeunload事件，需要额外在路由守卫钩子中判断isTableDirty状态做提示。如果一定要在页面内跳转时展示完全自定义的提示弹窗，需要自行拦截所有a标签、跳转按钮的点击事件，弹自定义模态框根据用户选择执行对应操作，但关闭标签页、地址栏输入跳转的场景依然只能使用浏览器默认提示，无法自定义文案。

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