Javascript 引导模式：不是一个函数

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

&时代；
这是情态标题
在这里添加一些文本
接近
提交更改

这是我在加载窗口时使用的JavaScript：

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

$（窗口）。加载（函数（）{
$（'prizePopup'）.modal（'show'）；
});

---

如何解决此问题？

您有一个问题。按以下顺序加载它们：

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

$（窗口）。加载（函数（）{
$（'prizePopup'）.modal（'show'）；
});

为什么会这样？因为：

插件依赖项 一些插件和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 * as $ from 'jquery';

致：

---

我参加聚会有点晚了，不过有一点很重要：

您的脚本可能顺序正确，但请注意脚本标记中的任何

async

s（如下所示）

这可能是问题的根源。特别是如果您仅为生产环境设置了此

async

，这可能会让您感到非常沮丧。

运行

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

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

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

在你的app.module.ts中

加

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

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

---

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

在Angular项目中集成model引导时，我遇到了这个错误

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

我和你一样关心谁

第一步，您需要通过

npm

命令安装

jquery

和

bootstrap

其次，您需要添加

声明var$：any在组件中

和use可以使用
$（'#myModal'）.modal（'hide'）on onSave（）方法

演示导致类型错误的原因：$（…）。模式不是函数：

脚本加载顺序错误
多个jQuery实例
解决方案：

在这种情况下，如果脚本试图访问尚未访问的元素
到达时，您将得到一个错误。引导依赖于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事件别名，如
.load
、
.unload
或
或
自jQuery 1.8以来已弃用

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

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

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


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

最后，通过进行以下更改对其进行修复：

（之前）：

（之后）：

在这里找到答案：
使用：

jQuery.noConflict（）；
$（'prizePopup'）.modal（'toggle'）；
我在jsp中添加了一个模态对话框，并试图在jsx中用javascript打开它，但遇到了相同的错误：“…模态不是函数”

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

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

在窗口就绪函数“$（window）.load（function（）{”中编写模式触发器代码通过两次定义JQuery实例保存了我，问题将出现。感谢这一点，我遇到了这个问题，发现我自己的DataTable.min.js已将JQuery库导入其中，但我的页面再次导入，这是根本问题造成的。非常好的提示，我在Aurelia中安装了JQuery npm，并在index.html.Th中手动加载anks！在我工作的一个大框架中，设置非常糟糕，jQuery被加载到了一些页面中，但在其他页面中：在撞了我的头几次之后，我来到这里阅读@Nurp ANSUR。节省了我的时间。问题是我使用的应用程序依赖于较旧的jQuery版本，我不允许更改，稍后将导入某个阶段！我使用了最新版本的jquery，然后使用了bootstrap js，导致了所有问题！这也是我的问题。我从angular.js的脚本部分删除了jquery，还从“jquery”中删除了“import*as$”从类型脚本和一切工作。我仍然有这个问题，当我试图运行模式使用谷歌开发工具。@CodedContainer确保
$
是jQuery函数。最有可能的是
querySelector
函数（名为
$
），它是由谷歌Chrome开发工具公开的。你应该
jQuery.noConflict();
$('#prizePopup').modal('show');

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

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

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

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

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