IT技术 - Bootstrap 模式：不是函数 - 吾爱随笔录

Bootstrap 模式：不是函数

IT技术 javascript jquery html bootstrap-modal

2021-03-01 05:39:01

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

我该如何解决这个问题？

6个回答

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

<!-- 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 依赖于 jQuery：

插件依赖

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

当我尝试使用谷歌开发工具运行模态时，我仍然遇到这个问题。

2021-04-26 05:39:01

你值得点赞

2021-05-01 05:39:01

@CodedContainer 确保$是 jQuery 函数。很可能是 Google Chrome Dev Tools 公开的querySelector函数（名为$）。

2021-05-11 05:39:01

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

那也是我的问题。我从 angular.js 的脚本部分中删除了 jquery，并从 Typescript 中删除了“import * as $ from 'jquery'”，一切正常。

2021-04-17 05:39:01

很好的提示，我在 Aurelia 中安装了 jquery npm，也在 index.html 中手动加载。谢谢！

2021-04-28 05:39:01

在我工作的一个大型框架中，设置很糟糕，jQuery 加载到了一些页面中，但在其他页面中：在敲打我的头几次之后，去这里阅读@Nurp 的答案。拯救了我的一天。

2021-05-03 05:39:01

感谢这一点，我遇到了这个问题，发现我自己的 DataTable.min.js 已将 jquery 库导入其中，但我的页面再次导入它，这是导致它的根本问题。

2021-05-10 05:39:01

问题是我使用的应用程序依赖于较旧的 jquery 版本，我不允许更改，它会在稍后的某个阶段导入！我使用了最新版本的 jquery，然后使用了 bootstrap js，导致了所有问题！

2021-05-14 05:39:01

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

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

解决方案：

万一，如果脚本尝试访问尚未到达的元素，那么您将收到错误消息。Bootstrap 依赖于 jQuery，所以必须先引用 jQuery。因此，您必须先调用 jquery.min.js，然后调用 bootstrap.min.js 并且进一步的 bootstrap Modal 错误实际上是您在调用 modal 函数之前没有包含 bootstrap 的 javascript 的结果。Modal 是在 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 事件别名，如.load，.unload或.error自 jQuery 1.8 起弃用。
```
$(window).on('load', function(){ 
      $('#prizePopup').modal('show');
});
```
或尝试直接打开模态弹出窗口
```
$('#prizePopup').on('shown.bs.modal', function () {
      ...
});
```

我更改为直接通过$(".modalClassName")它来掌握模态并且它有效......

2021-05-02 05:39:01

谢谢，就我而言，我正在加载两个 jQuery 实例。

2021-05-09 05:39:01

jQuery 应该是第一个：

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

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

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

其它你可能感兴趣的问题

上一篇将文本添加到字符串的开头下一篇Firebase 云函数：onRequest 和 onCall 之间的区别