Laravel Blade文件中使用jQuery报错“$未定义”的问题求助

嘿，这个问题我碰到好多次了！本质就是你的页面专属JS代码在jQuery加载完成之前就执行了，所以才会找不到$对象。毕竟你的app.js里能正常运行，说明jQuery本身是没问题的，问题出在加载顺序上。下面给你几个靠谱的解决办法：

1. 利用Laravel Blade的栈（Stack）机制加载脚本 #

这是最规范的做法，Laravel官方也推荐这么用。

首先修改你的app.blade.php布局文件，把页面专属脚本的栈放在app.js加载之后，比如放在</body>标签前：

<!-- 先加载全局的app.js（包含jQuery） -->
<script src="{{ mix('js/app.js') }}"></script>
<!-- 这里放页面专属的脚本栈 -->
@stack('scripts')
</body>
</html>

然后在你的子Blade文件里，用@push('scripts')包裹你的jQuery代码：

@push('scripts')
<script>
    // 用$(document).ready确保DOM加载完成
    $(document).ready(function() {
        // 你的页面专属jQuery逻辑
        console.log("终于能正常用jQuery啦！");
    });
</script>
@endpush

这样就能保证你的页面JS在jQuery完全加载后才执行。

2. 监听DOM加载完成事件 #

如果因为某些原因，你必须在页面中间写JS代码，可以给代码加上DOMContentLoaded监听，确保所有依赖都加载完成后再执行：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 这里写你的jQuery代码
        $(function() {
            // 比如绑定点击事件
            $('.btn').click(function() {
                alert("点击有效！");
            });
        });
    });
</script>

3. 确保jQuery全局暴露 #

如果你是通过npm安装的jQuery，有时候需要手动把它挂载到window对象上，才能在全局访问到$。打开你的app.js，加上这行代码：

// app.js
window.$ = window.jQuery = require('jquery');

或者用Laravel Mix的自动加载功能，在webpack.mix.js里配置：

// webpack.mix.js
mix.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery']
});

额外提醒 #

• 绝对不要在<head>标签里直接写依赖jQuery的代码，因为此时jQuery还没加载完成。
• 如果你的app.js标签加了defer或者async属性，一定要保证@stack('scripts')在它之后，不然还是会出现顺序问题。

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