Bootstrap modal：不是一个函数答案

【问题标题】：Bootstrap modal: is not a functionBootstrap modal：不是一个函数
【发布时间】：2014-11-03 15:54:05
【问题描述】：

我的页面中有一个模式。当我在 Windows 加载时尝试调用它时，它会向控制台打印一条错误消息：

$(...).modal is not a function

这是我的模态 HTML：

<div class="modal fade" id="prizePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
                This Modal title
            </h4>
        </div>
        <div class="modal-body">
            Add some text here
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">
                Submit changes
            </button>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

这是我在加载窗口时运行它的 JavaScript：

<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

我该如何解决这个问题？

【问题讨论】：

在窗口就绪函数中编写你的模态触发代码
" $(window).load(function() { " 救了我
通过两次定义 JQuery 实例会出现问题。

标签： javascript jquery html bootstrap-modal

【解决方案1】：

您的脚本顺序有问题。按以下顺序加载它们：

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

为什么会这样？因为Bootstrap JS depends on jQuery：

插件依赖

一些插件和 CSS 组件依赖于其他插件。如果您单独包含插件，请确保在文档中检查这些依赖项。 还要注意所有插件都依赖于 jQuery（这意味着 jQuery 必须在插件文件之前包含）。

【讨论】：

当我尝试使用谷歌开发工具运行模式时，我仍然遇到这个问题。
@CodedContainer 确保 $ 是 jQuery 函数。很可能是由 Google Chrome 开发工具公开的 querySelector 函数（名为 $）。
你值得点赞

【解决方案2】：

如果在您的代码中多次声明 jQuery，也可能会显示此警告。第二个 jQuery 声明阻止 bootstrap.js 正常工作。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

【讨论】：

感谢这一点，我遇到了这个问题，发现我自己的DataTable.min.js已经导入了jquery库，但是我的页面又导入了它，这是根本问题造成的。跨度>
很好的提示，我在 Aurelia 中安装了 jquery npm 并在 index.html 中手动加载。谢谢！
在我工作的大型框架中，设置很糟糕，jQuery 在某些页面中加载，但在其他页面中：在敲了我几次头之后，去这里阅读@Nurp 答案。拯救了我的一天。
问题是我正在使用依赖于旧 jquery 版本的应用程序，并且我不允许更改，并且稍后将在某个阶段导入它！我使用了最新版本的 jquery，然后引导 js，导致所有问题！
这也是我的问题。我从 angular.js 的脚本部分中删除了 jquery，还从 Typescript 中删除了“import * as $ from 'jquery'”，一切正常。

【解决方案3】：

TypeError 的原因：$(…).modal 不是函数：

脚本加载顺序错误。
多个 jQuery 实例

解决方案：

如果一个脚本试图访问一个尚未被访问过的元素达到了，然后你会得到一个错误。 Bootstrap 依赖于 jQuery，所以必须先引用 jQuery。所以，你必须被称为 jquery.min.js，然后是 bootstrap.min.js，然后是 bootstrap 模态错误实际上是您之前没有包含引导程序的javascript的结果调用模态函数。模态定义在 bootstrap.js 而不是 jQuery。所以应该以这种方式包含脚本
```
   <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
   <script type="text/javascript" src="js/bootstrap.js"></script>
```
如果有多个 jQuery 实例，则第二个 jQuery 声明会阻止 bootstrap.js 正常工作。所以利用 jQuery.noConflict(); 在调用模态弹出窗口之前
```
jQuery.noConflict();
$('#prizePopup').modal('show');
```
自 jQuery 1.8 起已弃用诸如 .load、.unload 或 .error 等 jQuery 事件别名。
```
$(window).on('load', function(){ 
      $('#prizePopup').modal('show');
});
```
或者尝试直接打开模式弹出窗口
```
$('#prizePopup').on('shown.bs.modal', function () {
      ...
});
```

【讨论】：

谢谢，就我而言，我正在加载两个 jQuery 实例。
我改为直接通过$(".modalClassName") 掌握模态，它可以工作...

【解决方案4】：

jQuery 应该是第一个：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

【讨论】：

【解决方案5】：

问题是由于 jQuery 实例不止一次。如果您使用多个带有多个 jQuery 实例的文件，请小心。只需留下 1 个 jQuery 实例，您的代码就可以运行。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

【讨论】：

【解决方案6】：

改变脚本的顺序

因为bootstrap是一个jquery插件所以它需要jquery来执行

【讨论】：

【解决方案7】：

更改导入语句有效。来自

import * as $ from 'jquery';

到：

declare var $ : any;

【讨论】：

【解决方案8】：

用途：

jQuery.noConflict();
$('#prizePopup').modal('toggle');

【讨论】：

【解决方案9】：

在 Angular 中集成模态引导时遇到此错误。

这是我解决这个问题的方法。

我为谁担心。

第一步你需要通过npm命令安装jquery和bootstrap。

其次你需要在组件中添加declare var $ : any;

并且可以在 onSave() 方法上使用$('#myModal').modal('hide');

演示https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

【讨论】：

【解决方案10】：

运行

npm i @types/jquery
npm install -D @types/bootstrap

在项目中添加 Angular 项目中的 jquery 类型。之后包括

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

在您的 app.module.ts 中

添加

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

在你的 index.html 中，就在正文结束标记之前。

如果您正在运行 Angular 2-7，请在 tsconfig.app.json 文件的类型字段中包含“jquery”。

这将删除 Angular 项目中的“modal”和“$”的所有错误。

【讨论】：

【解决方案11】：

努力解决这个问题，检查加载顺序以及是否通过捆绑包含两次 jQuery，但这似乎不是原因。

最后通过以下更改修复它：

（之前）：

$('#myModal').modal('hide');

（之后）：

window.$('#myModal').modal('hide');

在这里找到答案：https://github.com/ColorlibHQ/AdminLTE/issues/685

【讨论】：

【解决方案12】：

我参加聚会有点晚了，但是有一个重要提示：

您的脚本的顺序可能正确，但请注意脚本标签中的任何asyncs（像这样）

<script type="text/javascript" src="js/bootstrap.js" async></script>

这可能是导致问题的原因。特别是如果您将这个 async 设置为仅用于生产环境，这会让人非常沮丧。

【讨论】：

问题中的代码清楚地表明（a）它们的顺序不正确，（b）它们没有使用异步属性
我给出答案是因为这是一个经常被谷歌搜索的问题，有人可能会从中受益

【解决方案13】：

问题只是在生产中发生在我身上，只是因为我使用 HTTP 而不是 HTTPS 导入了 jquery（并且生产是 HTTPS）

【讨论】：

【解决方案14】：

我在 jsp 中添加了一个模态对话框，并尝试在 jsx 中使用 javascript 打开它并遇到相同的错误："...modal is not a函数”

就我而言，只需将缺少的导入添加到 jsx 即可解决问题。

`import "./../bower/bootstrap/js/modal.js"; // or import ".../bootstrap.min.js"`

【讨论】：