jQuery 在 Laravel 8 中无法正常工作答案

【问题标题】：jQuery doesn't working properly in Laravel 8jQuery 在 Laravel 8 中无法正常工作
【发布时间】：2021-05-23 09:27:49
【问题描述】：

我想在我的 Laravel 项目中使用 DataTables（jquery 插件）。

所以，我将所需的 js 和 css 文件链接（使用 cdn）放在我的刀片模板中，jquery 除外。因为我知道 jquery 已经存在（通过'js/app.js'在我的刀片模板中链接），因为我正在使用 Laravel UI 包。此外，在我的浏览器控制台中运行 $().jquery 显示我已经使用 jquery 3.5.1.. 因为 bootstrap 4.* 正在使用它。

但是我得到了这个 - “uncaught referenceError....”，表现得好像我没有 jQuery。（jQuery 脚本也不起作用）please see attached image

所以，我添加了 jQuery cdn 链接并得到“jQuery 延迟异常”

好吧，然后我从刀片布局中删除了“js/app.js”。现在 DataTables 可以工作，jQuery 脚本也可以工作，但是 bootStrap 停止工作。

我该如何解决这个问题？！！

【问题讨论】：

标签： jquery laravel

【解决方案1】：

使用这个cdn：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.23/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.23/datatables.min.js"></script>

这些用于引导数据表。

Read More about Bootstrap Datatable

【讨论】：

无论如何这都无济于事。实际上，我有它们。我的问题定义的第二行说，我需要数据表的 js 和 css 文件。问题出在 jQuery 上，它只能与引导程序一起工作，但不能在任何地方工作。
检查cdn序列，jQuery cdn应该是第一个然后datatable cdn...
CDN序列OK，dataTables在页尾，jQuery在head。

【解决方案2】：

我找到了一个不寻常的解决方案。
如果我们以默认的'deferred'方式加载app.js，就会出现问题。

<script src="app.js" defer></script>

只需删除 defer 属性即可解决问题。

<script src="app.js"></script>

原因：
页面加载时加载数据表。但是使用defer 属性，jQuery 会在页面加载后加载。所以datatable抛出错误，找不到jQuery。

【讨论】：