点击保存按钮报Uncaught TypeError: $ is not a function是什么原因

错误原因 #

• jQuery未正确加载：页面没有引入jQuery资源、jQuery引入路径/CDN失效、jQuery的引入位置在你调用$的代码之后，都会导致$未定义。之前运行正常现在报错，大概率是近期修改了页面资源引入顺序，或者jQuery的加载地址失效。
• $别名被覆盖：如果页面同时引入了Prototype、MooTools等同样使用$作为默认别名的库，或者业务代码中手动给$变量赋了其他值，就会覆盖jQuery的$别名。
• jQuery开启了noConflict模式：如果代码中调用过$.noConflict()，会主动释放$的控制权，此时直接调用$就会抛出该错误。

解决方案 #

1. 检查jQuery引入状态
   首先确认jQuery的引入代码位置在所有使用jQuery的代码之前，示例引入写法：

<!-- 需放在所有调用$的代码前面，比如<head>标签内或者页面顶部 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

可以打开浏览器F12控制台的「网络」标签，检查jQuery资源是否加载成功，本地引入的话确认文件路径是否正确。

2. 解决$别名冲突
   如果确认jQuery加载正常，就是别名被占用的问题，可以用两种方法修复：

• 直接用jQuery代替$，把你的按钮代码改成：

<div class="col-md-6 offset-md-4">
    <a href="javascript:;" onclick="javascript:jQuery('#crud').submit();" class="btn btn-primary">{{ __('Save') }}</a>
</div>

• 推荐你改用事件绑定的写法，避免内联onclick的维护问题，同时通过自执行函数隔离作用域绑定$别名：

// 该代码放在jQuery引入之后即可
(function($) {
  $('.btn-primary').on('click', function() {
    $('#crud').submit();
  })
})(jQuery);

对应把按钮的onclick属性删掉即可。

3. 检查noConflict配置
   如果之前的代码中主动加了$.noConflict()，要么移除该行配置，要么用上面的别名绑定方法处理即可。

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