类型错误：$(...).modal不是一个函数，使用Bootstrap Modal。

Question

我有一个Bootstrap 2.32的模态框，我正在尝试将它动态插入到另一个视图的HTML中。我使用Codeigniter 2.1开发。根据Dynamically inserting a bootstrap modal partial view into a view，我的代码如下：

<div id="modal_target"></div>

将目标div作为插入点。在我的视图中有一个按钮，看起来像这样：

     <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>

我的JS代码有：

$.ajax({
    type    : 'POST', 
    url     : "AjaxUpdate/get_modal",
    cache   : false,
    success : function(data){ 
       if(data){
            $('#modal_target').html(data);

            //This shows the modal
            $('#form-content').modal();
       }
    }
});

主视图的按钮是：

<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>

这是我想要单独存储为部分视图的内容：

<div id="form-content" class="modal hide fade in" style="display: none;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Send me a message</h3>
    </div>
    <div class="modal-body">
        <form class="contact" name="contact">
             <fieldset>

               <!-- Form Name -->

            <legend>modalForm</legend>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="user">User</label>
              <div class="controls">
                <input id="user" name="user" type="text" placeholder="User" class="input-xlarge" required="">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="old">Old password</label>
              <div class="controls">
                <input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="new">New password</label>
              <div class="controls">
                <input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="repeat">Repeat new password</label>
              <div class="controls">
                <input id="repeat" name="repeat" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>



                </fieldset>
        </form>
    </div>


    <div class="modal-footer">
        <input class="btn btn-success" type="submit" value="Send!" id="submit">
        <a href="#" class="btn" data-dismiss="modal">Nah.</a>
    </div>
</div>

当我点击按钮时，模态框能够正确地插入，但我收到了以下错误：

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

我该如何修复这个问题？

- user1592380

---

请检查是否适用于 jQuery(...).modal。您的 jQuery 可能处于兼容模式，还要检查是否重复引入了 jQuery。 - mwebber

在调用.modal()之前，bootstrap.js未被加载的可能性很大。 - LJ Wadowski

它的意思是：尝试使用 jQuery('#form-content').modal();。 - vp_arth

使用jQuery('#form-content').modal()代替$('#form-content').modal()。 - Himaan Singh

任何来这里找答案的人，像我一样，请看一下是.modal()而不是model()。这是一个如此愚蠢的错误。让我筋疲力尽。 :( - guitarlass

Answer 1

我想强调评论中mwebber所说的内容：

还要检查jQuery是否被重复引用了

:)

这个问题对我也是有影响的。

- adsurbum

---

请注意：一定要检查使用jQuery的ajax调用文件。 - Mister Verleg

当我在条件包含IE8的情况下放置较低版本的jQuery时，也会发生这种情况。 <!--[if lt IE 9]> - Jen

请确保没有其他库在其自己的min文件中捆绑jQuery（DataTables在某些情况下会这样做）。 - gillytech

不要忘记检查导入，例如：import '../jquery-3.3.1.js'; - Reza

在这种情况下应该怎么做？@gillytech - redress

我陷入了一个进退两难的境地。在我的Django应用程序中，我有菜单栏和模态窗口。按照惯例，我的大多数库都存放在父模板中。无论哪个页面有模态框，都会添加对bootstrap库的引用。现在菜单栏发生了一些有趣的事情 - 它们需要被点击两次才能激活。其他没有模态框的页面没有这个问题。有人能建议一下可能出了什么问题吗？ - Love Putin Not War

Answer 2

这个错误实际上是因为在调用modal函数之前没有包含bootstrap的javascript文件。在bootstrap.js中定义了Modal，而不是jQuery。另外，需要注意的是，bootstrap实际上需要jQuery来定义modal函数，因此在包含bootstrap的javascript之前，包含jQuery非常重要。为了避免这个错误，请确保在调用modal函数之前先包含jQuery，然后再包含bootstrap的javascript。通常我在头部标签中执行以下操作：

<header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/path/to/bootstrap/js/bootstrap.min.js"></script>
</header>

- davetw12

---

谢谢@davetw12，非常有帮助。 - WEshruth

正确答案。 :-) - Mr. Perfectionist

谢谢，这就是解决我的问题的方法。在这里找到脚本标签：https://getbootstrap.com/docs/5.0/getting-started/introduction/ - CaptainGenesisX

Answer 3

在连接了jquery和bootstrap之后，编写代码时，请将代码直接写在jquery和bootstrap的脚本标签下面。

$(document).ready(function($) {
  $("#div").on("click", "a", function(event) {
    event.preventDefault();
    jQuery.noConflict();
    $('#myModal').modal('show');

  });
});

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

- Rahul Mehra

Answer 4

我已经通过以下方式在React中解决了这个问题。

window.$('#modal-id').modal();

- Zaman Afzal

---

你是用React解决了这个问题吗？我的失败了。 - ephantus okumu

Answer 5

根据我的经验，这种情况很可能是由于使用多个版本的jquery版本引起的冲突。为了解决这个问题，我们可以使用类似下面的无冲突方法。

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
    $('button').click(function(){
        $('#modalID').modal('show');
    });
  });
})(jQuery);

- Jaison James

Answer 6

请检查通过Ajax加载的html中是否包含jquery库。在AjaxUpdate/get_modal中移除<script src="~/Scripts/jquery[ver].js"></script>。

- Moslem7026

Answer 7

另一种可能性是你包含的其他脚本之一通过包含JQuery或与$冲突来引起问题。尝试删除其他已包含的脚本，看看是否解决了问题。在我的情况下，在不必要地搜索我的代码数小时后，我按二进制搜索模式删除了脚本，并立即发现了有问题的脚本。

- brad12s

Answer 8

我通过修改 resources\assets\js\bootstrap.js 文件中的下面一行代码来解决这个 Laravel 的问题。

window.$ = window.jQuery = require('jquery/dist/jquery.slim');

为了

window.$ = window.jQuery = require('jquery/dist/jquery');

- Radostin Stoyanov

---

jQuery slim 不包含 modal()。 - Ryan Griggs

这就是为什么它没有工作的原因。 - Gwyneth Llewelyn

Answer 9

运行

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文件中，在body标签的结束前加入以下代码。

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

这将消除你的Angular项目中所有关于 'modal' 和 '$' 的错误。

- cyperpunk

Answer 10

在我的情况下，我使用Rails框架并且重复引用了jQuery。我认为这可能是一个原因。

你可以首先检查app/assets/application.js文件。如果出现了jquery和bootstrap-sprockets，那么就不需要第二个库的引用了。该文件应该类似于这样：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

然后检查app/views/layouts/application.html.erb文件，并删除需要jquery的脚本。例如：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

我认为有些新手会因为使用多个教程中的代码示例而出现这个问题。

- B Liu