Bootstrap模板添加JS左侧边栏后出现Error loading page无法加载页面链接求助

核心诱因 #

该Error loading page报错是jQuery Mobile框架的典型提示，大概率是新增的左侧边栏JS代码附带引入了jQuery Mobile依赖，该框架默认会拦截页面所有<a>标签点击，尝试通过AJAX加载链接内容，和原有Bootstrap模板的跳转逻辑冲突导致。

分步修复步骤 #

• 第一步：禁用jQuery Mobile的默认链接拦截逻辑
  在所有JS代码的最前部，也就是引入jQuery库之后、引入jQuery Mobile库之前，插入以下代码：

$(document).on("mobileinit", function () {
  // 关闭AJAX加载链接逻辑
  $.mobile.ajaxEnabled = false;
  // 关闭自动绑定链接点击事件逻辑
  $.mobile.linkBindingEnabled = false;
  // 关闭hash路由监听
  $.mobile.hashListeningEnabled = false;
  // 关闭pushState路由监听
  $.mobile.pushStateEnabled = false;
});

插入后可直接关闭jQuery Mobile所有影响原生链接跳转的默认逻辑，完全保留原有Bootstrap模板的链接行为。

• 第二步：排查侧边栏的点击事件绑定
  如果添加上述代码后问题仍存在，检查左侧边栏对应的JS代码，确认是否存在给全局<a>标签绑定click事件并调用event.preventDefault()的逻辑，如有，将事件绑定的选择器调整为仅匹配侧边栏内部的触发元素即可，例如将$('a').click(...)修改为$('.sidebar-toggle, .sidebar-inner a').click(...)，避免误拦截页面其他区域的正常链接。

• 第三步：清理冲突路由规则
  如果模板本身使用了其他单页路由插件，检查路由规则中是否存在和现有页面链接路径冲突的配置，删除冲突规则即可。

验证方式 #

修改完成后刷新页面，点击任意正常链接，无报错且可正常加载对应内容即为修复成功。

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