当通过 ajax 加载包含 jqgrid 初始化代码的 html 页面时，因 dom 尚未就绪或脚本未执行，导致 grid 初始化失败；正确做法是在内容加载完成回调中显式初始化 grid，而非依赖原页面内联脚本。
当通过 ajax 加载包含 jqgrid 初始化代码的 html 页面时，因 dom 尚未就绪或脚本未执行，导致 grid 初始化失败；正确做法是在内容加载完成回调中显式初始化 grid，而非依赖原页面内联脚本。
在使用 jQuery Grid（如 jqGrid 或其现代分支 free-jqGrid）时，一个常见误区是：将 grid 初始化逻辑（如 $("#gridtable").jqGrid(...)）直接写在被 AJAX 加载的子页面（如 gridePage.html）中。当该 HTML 片段通过 $.ajax() 或 .html() 插入父页面（如 main.html）后，其中的内联 <script> 标签<strong>不会自动执行——这是浏览器的安全机制，也是问题的根本原因。</script>
✅ 正确方案：在 load() 回调中初始化 grid
推荐使用 $.fn.load() 方法替代原始 $.ajax()，因其内置 DOM 插入与回调保障，并确保初始化逻辑在内容渲染完成后立即执行：
$('#content').load("/gridePage.html", function() {
// ✅ 此时 #gridtable 已存在于 DOM 中，且 HTML 已解析完毕
$("#gridtable").jqGrid('setGridParam', {
data: [{
'type': 'aType',
'area': 'anArea'
}]
}).trigger("reloadGrid");
});
⚠️ 注意：$("#gridtable") 必须已在 gridePage.html 的 HTML 结构中正确定义（如
jQuery 1.12.4下载jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
），且 jqGrid 及其依赖（jQuery、jqGrid CSS/JS）已在 main.html 中提前加载。
❌ 为什么 $.ajax().success + .html() 不可靠？
- $('#content').html(data) 仅插入 HTML 字符串，不执行其中的 <script> 标签</script>；
- 即使手动提取并 eval() 脚本，也易引发作用域、执行时序和 XSS 风险；
- setTimeout 临时生效实为“竞态条件掩盖”——依赖不确定的渲染延迟，不可靠且难以维护。
? 进阶建议：模块化初始化逻辑
若项目中存在多个动态 grid 场景，可进一步封装为可复用函数：
function initDynamicGrid($container, gridId, gridData) {
const $grid = $container.find(gridId);
if ($grid.length === 0) {
console.warn(`Grid ${gridId} not found in container`);
return;
}
$grid.jqGrid('setGridParam', { data: gridData })
.trigger("reloadGrid");
}
// 使用示例
$('#content').load("/gridePage.html", function() {
initDynamicGrid($(this), "#gridtable", [
{ type: 'aType', area: 'anArea' }
]);
});
? 总结
- 永远不要依赖被 AJAX 加载页面中的内联脚本执行；
- 初始化逻辑必须置于父页面的加载完成回调中（推荐 load() 回调）；
- 确保 grid 容器元素（如
）已存在且唯一；
- 若需复杂配置（分页、远程 URL、列定义等），应在 load() 后完整调用 jqGrid({ ... }) 初始化，而非仅 setGridParam。
遵循此模式，即可稳定实现 jqGrid 在动态内容加载场景下的无缝初始化。
