jqGrid onSelectRow事件报错：jQuery(...).jqGrid is not a function 求助

错误原因定位 #

这个报错说明触发onSelectRow事件时，jQuery对象找不到jqGrid方法，通常是以下几种情况导致：

• 脚本加载顺序错误：事件绑定/触发时，jqGrid脚本还未加载完成，或者加载顺序虽在jQuery之后，但后续操作覆盖了绑定jqGrid的jQuery实例。
• 重复加载jQuery：页面多次引入jQuery，后续加载的jQuery覆盖了已绑定jqGrid的实例，新实例没有jqGrid方法。
• jqGrid核心模块缺失：若使用模块化的jqGrid（如free jqGrid），可能未加载grid.base.js、grid.common.js这类核心依赖模块。
• 作用域与冲突问题：onSelectRow回调中使用的jQuery不是绑定了jqGrid的实例，比如$被其他库覆盖，或闭包内未正确引用jQuery。

具体解决方案 #

1. 修正脚本加载顺序 #

严格遵循以下加载顺序：

• 先加载jQuery核心库
• 再加载jqGrid核心脚本（如jquery.jqGrid.min.js）
• 最后加载你的自定义业务脚本

示例正确顺序：

<script src="jquery.min.js"></script>
<script src="jquery.jqGrid.min.js"></script>
<script src="your-custom-script.js"></script>

若使用free jqGrid，注意语言包要在核心脚本前加载：

<script src="jquery.min.js"></script>
<script src="jqGrid/js/i18n/grid.locale-en.js"></script>
<script src="jqGrid/js/jquery.jqGrid.min.js"></script>

2. 删除重复的jQuery引入 #

检查页面所有位置（头部、底部、第三方插件），确保只引入一次jQuery，避免实例覆盖。

3. 确保回调使用正确的jQuery实例 #

在onSelectRow回调中，优先使用完整的jQuery而非$，避免冲突：

jQuery("#your-grid-id").jqGrid({
    // 其他配置项
    onSelectRow: function(rowid) {
        var rowData = jQuery("#your-grid-id").jqGrid('getRowData', rowid);
        console.log(rowData);
    }
});

或用闭包锁定$指向正确的jQuery：

(function($) {
    $("#your-grid-id").jqGrid({
        onSelectRow: function(rowid) {
            var rowData = $("#your-grid-id").jqGrid('getRowData', rowid);
            console.log(rowData);
        }
    });
})(jQuery);

4. 处理jQuery冲突 #

若页面有其他库（如Prototype、MooTools）占用$，调用noConflict()释放控制权：

var $j = jQuery.noConflict();
$j("#your-grid-id").jqGrid({
    onSelectRow: function(rowid) {
        var rowData = $j("#your-grid-id").jqGrid('getRowData', rowid);
        console.log(rowData);
    }
});

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