为何ASP.NET MVC应用Edge控制台报jQuery :has()选择器无效错误？

核心排查步骤 #

由于错误在所有页面触发，必然和全局加载的资源（jQuery、Bootstrap或自定义全局脚本）相关，结合提示的整数ID问题，按以下步骤定位：

1. 利用控制台调用栈定位代码行 #

• 打开Edge控制台的**调用栈（Stack）**面板，点击错误栈中的每一行，直接跳转到触发错误的脚本文件与代码位置。这类错误通常指向jQuery内部的选择器解析逻辑，或是Bootstrap依赖jQuery的相关代码。
• 重点关注涉及querySelector或jQuery选择器处理的调用栈条目，找到生成错误选择器的具体逻辑。

2. 检查全局脚本中的选择器写法 #

• 排查布局页（如_Layout.cshtml）里引用的所有全局脚本，包括自定义JS、Bootstrap初始化代码，寻找是否存在以下情况：
  • 直接使用:has选择器的代码
  • 动态拼接选择器时，将纯数字ID直接拼入（比如<div id="123"></div>，错误写法$("#123")，正确写法$("#'123'")或给ID加前缀如id="item-123"）

3. 验证jQuery与Bootstrap的兼容性 #

• 临时注释掉Bootstrap的JS引用，刷新页面观察错误是否消失，以此确认错误是否和Bootstrap相关。若消失，排查Bootstrap扩展脚本或自定义的Bootstrap使用代码中的选择器问题。

4. 用日志追踪所有jQuery选择器 #

• 在控制台执行以下代码（先保存原始初始化方法），打印所有jQuery调用的选择器，找到包含:jqfake或格式异常的选择器：

  const originalInit = jQuery.fn.init;
  jQuery.fn.init = function(selector, context, root) {
    if (typeof selector === 'string') console.log('jQuery选择器:', selector);
    return originalInit.apply(this, arguments);
  };
  

• 根据打印出的异常选择器，定位对应的业务代码。

5. 排查布局页的全局DOM操作 #

• 检查布局页中页面加载时自动执行的DOM操作（如事件绑定、元素遍历），确认是否存在不规范的选择器写法，或对动态生成元素使用了错误的选择器语法。

常见修复方案 #

• 纯数字ID问题：将纯数字ID改为带前缀的形式（如item-123），或在选择器中给纯数字ID加引号（$("#'123'")）。
• 第三方脚本问题：更新jQuery或Bootstrap至最新稳定版本，或修正第三方脚本中错误的选择器代码。

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