Bootbox回调调用reloadGrid后，jqGrid方法提示“not a function”问题求助

这个问题我之前也碰到过，本质是Bootbox对话框关闭时的上下文操作干扰了jqGrid的jQuery插件绑定。当你在Bootbox的回调里触发reloadGrid后，loadComplete执行时突然找不到jqGrid方法，大概率是Bootbox在销毁对话框的过程中，临时影响了jQuery的插件注册环境。

给你几个可行的解决方案：

• 提前缓存jqGrid实例，避免上下文干扰
  在页面初始化阶段就把jqGrid的jQuery对象缓存起来，后续所有操作都用这个缓存的实例，不管Bootbox怎么折腾上下文都不会受影响：

  // 页面加载完成后先缓存jqGrid实例
  const $myJqGrid = $('#jqGrid');
  
  // 初始化jqGrid（用缓存的实例）
  $myJqGrid.jqGrid({
    // 你的网格配置项...
    loadComplete: function() {
      // 直接用缓存的实例调用showCol
      $myJqGrid.jqGrid('showCol', 3);
    }
  });
  
  // Bootbox对话框的回调
  bootbox.dialog({
    title: "title",
    message: "foo",
    size: "large",
    closeButton: false,
    buttons: {
      ok: {
        label: "Save 2",
        className: "btn-success",
        callback: function () {
          $myJqGrid.trigger('reloadGrid');
        }
      }
    }
  });
  

• 直接调用jqGrid底层方法绕开jQuery链式调用
  如果缓存实例还是有问题，可以直接用jqGrid提供的底层静态方法，不用通过jQuery对象的链式调用，这样能避开Bootbox对jQuery插件的影响：

  loadComplete: function() {
    // this指向当前jqGrid的DOM表格元素
    $.jgrid.showCol(this, 3);
  }
  

• 延迟触发reloadGrid，等Bootbox清理完成
  就像你测试的那样，用setTimeout把reloadGrid的调用延后一点，让Bootbox先完成对话框的销毁和上下文清理，再执行网格重载：

  callback: function () {
    setTimeout(() => {
      $('#jqGrid').trigger('reloadGrid');
    }, 100); // 100毫秒足够让Bootbox完成清理工作
  }
  

简单解释下为什么不用Bootbox就没问题：Bootbox在关闭对话框时会做DOM清理、事件解绑等操作，过程中可能不小心重置了jQuery的$.fn扩展，导致后续调用$("#jqGrid").jqGrid时找不到对应的方法。而setTimeout把操作放到了事件循环的下一轮，这时候Bootbox的清理已经完成，jQuery的插件引用也恢复正常了。

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