Bootstrap 模态: 不是函数

我在我的页面中有一个模态。当我尝试在 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>

我怎样才能解决这个问题？

458365 次浏览
小开
最佳答案

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

<!-- 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>

为什么? 因为 引导 JS 依赖于 jQuery:

插件依赖

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

小开

JQuery 应该是第一个:

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

改变脚本的顺序

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

小开

如果在代码中多次声明 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>
小开

问题在于 jQuery 实例不止一次。如果使用许多文件和多个 jQuery 实例，请小心。只要保留一个 jQuery 实例，代码就可以工作了。

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

这个问题只是在生产环境中发生在我身上，因为我用 HTTP 而不是 HTTPS 导入了 jquery (生产环境是 HTTPS)

小开

更改 import 语句起作用

import * as $ from 'jquery';

致:

declare var $ : any;
小开

我来晚了点，不过有一点很重要:

脚本的顺序可能是正确的，但是要注意脚本标记中的任何 async(如下所示)

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

这可能就是问题的根源。特别是如果你有这个 async集只为生产环境，这可以得到真正令人沮丧的原因。

小开

快跑

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

在项目中添加 jquery 类型到您的 Angular 项目中

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

在你的应用程序模块里

加

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

在您的 index.html 中，就在 body 结束标记之前。

如果你正在运行 Angular 2-7，在 tsconfig.app.json 文件的 type 字段中包含“ Jquery”。

这将删除所有的错误’模态’和’$’在您的角度项目。

小开

我遇到这个误差时，积分模态自举在角度。

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

我为谁担心。

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

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

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

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

小开

TypeError 的原因: $(...) . mode 不是函数:

  1. 以错误的顺序加载脚本。
  2. 多个 jQuery 实例

解决方案:

  1. 以防万一，如果脚本试图访问一个尚未被 如果还没有到达，那么你将会得到一个错误。 Bootstrap 依赖于 jQuery, 因此，必须首先引用 jQuery 然后是 bootstrap.min.js，再进一步是 bootstrap 模态错误实际上是之前没有包含 bootstrap 的 javascript 的结果 调用模态函数 而不是在 jQuery 中，所以脚本应该以这种方式包含

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

  2. In case if there are multiple instances of jQuery, the second jQuery declaration prevents bootstrap.js from working correctly. so make use of jQuery.noConflict(); before calling the modal popup

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

    JQuery 事件别名，如 .load、 .unload或 .error，自 jQuery 1.8以来已不再使用。

    $(window).on('load', function(){
$('#prizePopup').modal('show');
});

    或者尝试直接打开模式弹出窗口

    $('#prizePopup').on('shown.bs.modal', function () {
...
});
小开

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

最后，通过以下改动修正了这一问题:

(在此之前) :

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

(之后) :

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

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

小开

用途:

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

我在 Jsp中添加了一个模态对话框，并试图在 JSX中用 javascript 打开它，结果碰到了同样的错误: “ ... 模态不是函数”

在我的例子中，只需将缺少的导入添加到 jsx 中即可解决问题。

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

提交答案