点击Edit按钮后如何保留jQuery AJAX加载的HTML表格

核心原因 #

你的Edit按钮设置了type="submit"，点击后会触发页面默认的表单提交行为，导致页面刷新，AJAX动态加载的表格数据被清空。

修复步骤 #

1. 修改按钮类型（最直接的解决方法） #

修改HTML中的Edit按钮，将type="submit"改为type="button"，这样点击时不会触发页面提交刷新：

<button id="btnEdit" name="edit" type="button" value="edit">Edit</button>

2. 可选：保留submit类型时阻止默认行为 #

如果必须保留type="submit"，可以在JS的点击事件中添加阻止默认行为的代码：

$("#btnEdit").click(function (e) {
    // 阻止默认提交行为
    e.preventDefault();
    buttonsEnableDisable(false);
    enableTableSelection = false;
    isRowHighlighted();
});

额外代码优化建议 #

除了核心问题，还有几处代码可以优化，提升稳定性：

• 用prop替代attr控制禁用状态：布尔属性（如disabled）用prop更准确：

function buttonsEnableDisable(editMode) {
    $("#departmentCase, #department, #charge, #labCase, #incidentReportDate").prop('disabled', editMode);
    $("#btnEdit").prop('disabled', !editMode);
    $("#btnSave, #btnCancel").prop('disabled', editMode);
}

• 清理isRowHighlighted函数的无效代码：else分支里的变量引用没有实际作用，可以删除：

function isRowHighlighted() {
    if (!$('input').val()) {
        alert("Please click a row.");
        enableTableSelection = true;
        buttonsEnableDisable(true);
    }
    // 移除无意义的变量引用
}

• 表格行点击事件委托：避免动态生成的行可能出现的绑定问题（当前代码在AJAX成功后绑定，没问题，但用委托更健壮）：

// 替换原有的行点击绑定代码
$("#recentCasesTable").on('click', 'tr', function () {
    if (enableTableSelection) {
        $('#recentCasesTable tr').removeClass('highlighted');
        $(this).addClass('highlighted');
        populateInputFields();
    }
});

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