集成Bootstrap 4时提示需先引入jQuery的问题求助

兄弟，我之前踩过完全一样的坑！结合你的描述，给你几个排查方向，按顺序试：

1. 先确认jQuery真的加载成功了 #

虽然你说移除Bootstrap JS就没报错，但很可能是jQuery的路径其实不对，导致浏览器根本没加载到jQuery文件，只是你没注意到404错误。

打开浏览器的「开发者工具」→ 切换到「网络」标签，刷新页面，找jquery-3.2.1.min.js这个文件：

• 如果它的状态是404，说明路径错了！
• 你的index.php在centralizedcalapan/admin/controller/model/view/include/里，而resources和admin是同级目录（都在centralizedcalapan下面），所以正确的相对路径应该是：

  <script src="../../../../../../resources/js/jquery-3.2.1.min.js"></script>
  

  （数一下：从include往上走5级到centralizedcalapan根目录，再进resources/js）

2. 检查有没有重复加载jQuery #

有时候页面其他地方（比如模板的底部、某个引入的组件/插件）会偷偷再加载一次jQuery，而且是在Bootstrap JS之后！这会覆盖之前的jQuery，导致Bootstrap找不到它。

同样在「网络」标签里，看所有加载的脚本，是不是有多个jquery*.js文件，注意它们的加载顺序——如果有一个是在bootstrap.min.js之后加载的，那就是问题所在，把那个重复的引入删掉。

3. 检查脚本标签的async/defer属性 #

如果你的jQuery脚本标签加了async或defer属性，而Bootstrap JS的标签没加，就会导致异步加载的jQuery可能比Bootstrap JS晚加载完成，这时候Bootstrap执行时jQuery还没准备好。

比如这种情况就会出问题：

<script src="../../resources/js/jquery-3.2.1.min.js" defer></script>
<script src="../../resources/js/bootstrap.min.js"></script>

把async/defer属性去掉，确保脚本按顺序同步加载。

4. 检查页面是否有动态加载脚本的情况 #

如果你的页面用了JS动态加载脚本（比如用document.createElement('script')），而且动态加载的是jQuery或者Bootstrap JS，也可能打乱顺序。确保动态加载的代码里，jQuery先加载完成再加载Bootstrap JS。

按上面的步骤排查，应该能解决问题！

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