JQGrid 15.2-pre行内编辑取消按钮点击事件无响应问题求助

架构老林

2026-5-27

解决JQGrid 15.2-pre行内编辑取消按钮无响应的问题

你的问题核心原因大概率是动态元素的事件绑定时机不对——行内编辑的取消按钮是在进入编辑模式后才动态生成的，你直接用$('div[id^="jCancelButton"]').click(...)绑定事件时，这些按钮还没出现在DOM中，自然无法触发绑定的函数。

给你两个实用的解决方案，按推荐程度排序：

方案1：利用JQGrid内置编辑事件（最可靠）

JQGrid本身提供了行内编辑相关的原生事件，比直接操作DOM元素更稳定，推荐优先使用。

方式A：全局`afterRestoreCell`事件

这个事件会在取消编辑、单元格恢复原始值后自动触发，适合全局监听所有行的取消操作：

$("#你的表格ID").jqGrid({
    // 你的其他表格配置项...
    afterRestoreCell: function (rowid) {
        alert('test');
        checkCrudGrid();
    }
});

方式B：`editRow`方法的回调函数

如果你是手动调用editRow开启行编辑，可以在方法参数里指定取消后的回调：

$("#你的表格ID").jqGrid('editRow', 目标行ID, {
    // 其他编辑配置...
    afterrestorefunc: function (rowid) {
        alert('test');
        checkCrudGrid();
    }
});

方案2：事件委托（兼容动态元素）

如果必须通过DOM元素绑定事件，改用事件委托的方式——把事件绑定到已经存在的父元素上，让动态生成的按钮触发事件时通过事件冒泡被捕获：

// 绑定到表格的父容器（或直接用document，推荐用最近的已存在父元素）
$("#你的表格ID").on('click', 'div[id^="jCancelButton"]', function () {
    alert('test');
    checkCrudGrid();
});