页面引入两个jQuery版本致$未定义错误，求解决方案

你遇到的Uncaught TypeError: $ is not a function错误，核心原因是jQuery版本加载顺序混乱+noConflict调用时机错误，导致依赖jQuery的插件/UI库找不到正确的$或jQuery对象：

• 加载jQuery 1.12.4后立刻调用noConflict()，直接释放了$的控制权，但紧接着加载的jQuery UI 1.12.1需要依赖这个旧版jQuery，此时$已经失效，jQuery UI无法正确绑定。
• 电子签名插件jquery.signature.min.js加载时处于两个jQuery版本之间，既没有绑定到旧版也没有绑定到新版，后续被新版jQuery覆盖后，插件的上下文完全混乱。
• 第二个noConflict()调用后，$再次被释放，任何依赖$的代码都会报错。

调整脚本加载顺序，确保每个依赖库都绑定到对应的jQuery版本，正确使用noConflict隔离不同版本：

<!-- 加载旧版jQuery 1.12.4 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 先加载依赖旧版的jQuery UI，此时$和jQuery都指向1.12.4 -->
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- 调用noConflict(true)，彻底释放$和jQuery的控制权，用自定义变量保存旧版 -->
<script>var $jQuery1_12_4 = $.noConflict(true);</script>

<!-- 加载新版jQuery 3.6.1 -->
<script src="../../assets/js/jquery-3.6.1.min.js"></script>
<!-- 加载依赖新版的电子签名插件，此时$和jQuery指向3.6.1 -->
<script type="text/javascript" src="../../assets/js/jquery.signature.min.js"></script>
<!-- 可选：如果需要彻底隔离新版，也用自定义变量保存 -->
<script>var $jQuery3_6_1 = $.noConflict(true);</script>

• 依赖库必须紧跟对应版本的jQuery：比如jQuery UI依赖旧版，就必须在旧版jQuery加载后、调用noConflict前加载；签名插件如果兼容新版，就放在新版jQuery之后加载。
• noConflict(true)的作用：加上true参数会同时释放$和jQuery的控制权，彻底隔离两个版本，避免交叉污染。
• 后续使用时，要明确用自定义变量调用对应版本的jQuery：
  • 调用旧版jQuery UI组件：$jQuery1_12_4(selector).dialog()
  • 调用新版电子签名插件：$jQuery3_6_1(selector).signature()

如果你的电子签名插件兼容旧版jQuery，更建议只保留一个jQuery版本，完全避免版本冲突——除非你确实有必须同时使用两个版本的业务场景。

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