Essential Grid API重绘失效 自定义JS报essapi_19未定义错误

错误根因 #

新版本Essential Grid调整了API实例的暴露规则，不再默认直接挂载全局essapi_xx变量，要么是你的自定义JS加载时机早于Essential Grid初始化完成，要么是官方废弃了全局变量的暴露方式，需通过官方指定的DOM元素数据接口获取API实例。

修复方案 #

1. 替换所有硬编码的API调用 #

将代码中所有essapi_19.esredraw()的调用，替换为动态获取实例的逻辑，每次调用前先校验实例是否存在，避免报错：

// 动态获取网格API实例，#eg-19-wrap为对应网格的容器ID，规则为eg-[你的网格ID]-wrap
const getGridApi = () => jQuery('#eg-19-wrap').data('essgrid');

// 调用重绘的统一逻辑
const redrawGrid = () => {
  const api = getGridApi();
  if(api && typeof api.esredraw === 'function') api.esredraw();
}

之后所有需要重绘的位置，直接调用redrawGrid()即可。

2. 优化后的完整代码 #

// 公共工具函数
const getGridApi = () => jQuery('#eg-19-wrap').data('essgrid');
const redrawGrid = () => {
  const api = getGridApi();
  if(api && typeof api.esredraw === 'function') api.esredraw();
}
const resetGridElements = () => {
  jQuery('.eg-washington-red-element-22, .esg-content.eg-washington-red-element-20, .eg-washington-red-element-20-a').hide();
  jQuery('#test-COS .esg-entry-content .esg-content.eg-washington-red-element-20-a').removeClass('eg-washington-red-element-20-a').addClass('eg-washington-red-element-20');
}

// 初始化执行
resetGridElements();

// 展开事件绑定
jQuery('body').off('click', '.eg-washington-red-element-21').on('click', '.eg-washington-red-element-21', function() {
  jQuery('.esg-content.eg-washington-red-element-20, .eg-washington-red-element-22, .eg-washington-red-element-20-a').hide();
  jQuery('.eg-washington-red-element-21').show();
  const $Sibling = jQuery(this).siblings('.esg-content.eg-washington-red-element-20');
  jQuery($Sibling).slideDown(0,function(){
    jQuery(this).siblings('.eg-washington-red-element-22').show();
    jQuery(this).siblings('.eg-washington-red-element-21').hide();
    redrawGrid();
  })
});

// 收起事件绑定
jQuery('body').off('click', '.eg-washington-red-element-22').on('click', '.eg-washington-red-element-22', function() {
  const $Sibling = jQuery(this).siblings('.esg-content.eg-washington-red-element-20');
  jQuery($Sibling).slideUp(0,function(){
    resetGridElements();
    jQuery(this).siblings('.eg-washington-red-element-21').show();
    redrawGrid();
  })
});

// 加载更多处理
jQuery('body').off('click', '.esg-loadmore').on('click', '.esg-loadmore', function() {
  setTimeout(function(){
    redrawGrid();
    resetGridElements();
  }, 2500);
});

3. 可选兼容调整 #

如果修改后仍有报错，可将所有代码包裹在Essential Grid初始化完成的回调中，确保实例已生成：

jQuery(document).on('essgrid_ready', function() {
  // 把上面所有的JS代码放这里
});

排查校验点 #

• 确认你的网格ID是否为19，可在WordPress后台Essential Grid的网格设置页查看ID，若ID变更需对应修改#eg-19-wrap中的数字
• 若使用了缓存、JS压缩合并插件，更新后请清空所有缓存再测试
• 排查页面上是否存在多个相同ID的网格容器，若有会导致实例获取失败

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