blade @push 脚本，jquery: $ 不是函数

Question

我有一个组件文件：

my-component.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
......
</head>
<body>
........

  <script src="/vendor/jquery/jquery.min.js" defer></script>
  @stack('scripts')
</body>

</html>

otherfile.blade.php


<x-my-component>
.....

@push("scripts")
  <script defer>
    console.log($("body")); // a simple print element
  </script>
@endpush
</x-my-component>

browser console

Uncaught TypeError: $ is not a function

我尝试使用 yield 和 section 并得到相同的结果我怎么解决这个问题？（我的 public 供应商上有 jquery 文件，所以问题不可能出在 jquery 导入路径上）

Answer 1

来自documentation for the script element：

Warning: [The defer] attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect.

因此加载 jQuery 的脚本在 文档被解析后执行 并且试图使用它的脚本 立即执行 （因为 defer 属性被忽略）before $ 添加到页面范围。

blade @push 脚本，jquery: $ 不是函数

blade @push scripts , jquery: $ is not a function

javascript

laravel

laravel-blade