Question

我试图将bootstrap-select添加到我的Flask应用程序中，并且不断遇到错误“ TypeError：$（...）。selectpicker不是函数”。我读过的所有内容都说，只有在加载bootstrap-select.js之后再次加载jQuery时，才会发生这种情况，因此我仔细检查并清理了脚本，确保在所有其他JS脚本之前加载jQuery，如下所示：

<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"> </script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

但是，我仍然遇到同样的问题。我决定看一下chrome开发人员工具窗口中的加载顺序，现在我认为我的问题是：在引导选择之前对jQuery进行排队加载，但实际上< em>开始下载，直到bootstrap-select完成。我怀疑这是由于两者之间的大小差异。

有什么办法可以迫使我的其他脚本延迟加载直到jQuery已经加载之后？或者，如果我想出了如何在静态目录中缓存jQuery副本的方法，对您有帮助吗？

编辑：哇，好吧，我对此有很多评论！为了尽可能地澄清，我将做一些笔记：

彻底检查完所有脚本后，我可以确认仅加载了jQuery的一个副本。
这不是https页面，我正在Flask开发服务器上本地运行它。
我检查了代码中的引导程序选择URL，它是正确的。抱歉，我不确定为什么在复制粘贴时它不包含破折号。我已经相应地纠正了这个问题。
我一直在使用chrome开发工具中的“网络”标签来检查加载成功/时间。
我将jQuery移至文件的开头，以确保首先加载它，现在我可以确认在引导选择加载之前已完成加载。

尽管有所有这些，我仍然会遇到相同的错误，因此，如果有人有其他建议，我将不胜感激。在这一点上，我完全没有主意。

Answer 1

您应该将defer放在两个脚本标签的末尾，这样它们才能按顺序加载，就像这样：

<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous" defer></script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrapselect/1.13.1/js/bootstrap-select.min.js" defer></script>

Answer 2

尝试将引导程序选择库的URL更改为：

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js

Answer 3

我有解决方案，而且很愚蠢。

我在所有其他模板扩展的基本模板中，将脚本添加到以前的开发人员添加脚本的位置。关键是，在body标记关闭后，他们将其添加到页面的末尾（大概是为了使页面加载更快）。使用selectpicker的jQuery的小部分在中体内，因此试图过早加载该函数。

感谢您的所有回答！

如何强制jQuery首先加载？

3 个答案: