TypeError: $(...).modal 不是带有引导模式的函数答案

【问题标题】：TypeError: $(...).modal is not a function with bootstrap ModalTypeError: $(...).modal 不是带有引导模式的函数
【发布时间】：2015-01-19 18:21:45
【问题描述】：

我有一个引导程序 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

我该如何解决这个问题？

【问题讨论】：

检查它是否适用于jQuery(...).modal。您的 jQuery 可能处于兼容模式，还要检查 jQuery 是否不包含两次。
在你尝试调用.modal()之前很有可能bootstrap.js没有加载
意思是：试试jQuery('#form-content').modal();
而不是 $('#form-content').modal();使用 jQuery('#form-content').modal();
任何像我一样来这里寻求答案的人，看看是不是.modal() 不是model()。这样一个蹩脚的错误。让我筋疲力尽。 :(

标签： javascript jquery css twitter-bootstrap twitter-bootstrap-2

【解决方案1】：

我只是想强调一下 mwebber 在评论中所说的话：

还要检查 jQuery 是否没有被包含两次

:)

这是我的问题

【讨论】：

记住：一定要检查 ajax 调用的 jQuery 文件。
当我将较低版本的 jquery 放入 ie8 的条件包含时也发生了。

【解决方案2】：

这个错误实际上是你在调用modal函数之前没有包含bootstrap的javascript的结果。模态是在 bootstrap.js 而不是 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，帮了大忙
正确答案。 :-)

【解决方案3】：

链接你的 jquery 和 bootstrap 之后，在 jquery 和 bootstrap 的 Script 标签下面写你的代码。

$(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>

【讨论】：

【解决方案4】：

我已经通过像这样使用它来解决这个问题。

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

另一种可能性是您包含的其他脚本之一由于包含 JQuery 或与 $ 冲突而导致问题。尝试删除其他包含的脚本，看看它是否能解决问题。就我而言，经过数小时不必要的代码搜索后，我以二进制搜索模式删除了脚本并立即发现了有问题的脚本。

【讨论】：

【解决方案7】：

运行

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”和“$”的所有错误。

【讨论】：

【解决方案8】：

根据我的经验，很可能它发生在 jquery 版本（使用多个版本）冲突中，为了解决这个问题，我们可以使用如下所示的无冲突方法。

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

【讨论】：

【解决方案9】：

我在 Laravel 中通过修改 resources\assets\js\bootstrap.js 中的以下行解决了这个问题

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

到

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

【讨论】：

jQuery slim 不包含 modal()。

【解决方案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>

我认为有时当新手使用多个教程代码示例时会导致此问题。

【讨论】：

【解决方案11】：

对我来说，//= require jquery 在//= require bootstrap 之后。一旦我在引导之前移动 jquery，一切正常。

【讨论】：

【解决方案12】：

其他答案在我的 react.js 应用程序中对我不起作用，因此我为此使用了纯 JavaScript。

以下解决方案有效：

为模式/对话框的关闭部分提供一个 ID（以下示例中的“myModalClose”）

<span>
   className="close cursor-pointer"
   data-dismiss="modal"
   aria-label="Close"
                     id="myModalClose"
>
...

使用该 id 为上述关闭按钮生成点击事件：

   document.getElementById("myModalClose").click();

您也可以使用 jQuery 生成相同的关闭按钮点击。

希望对您有所帮助。

【讨论】：

【解决方案13】：

我遇到了同样的问题。改变

$.ajax(...)

到

jQuery.ajax(...)

没用。但后来我发现 jQuery 被包含了两次，删除其中一个解决了问题。

【讨论】：

【解决方案14】：

我猜你应该在你的按钮中使用

<a data-toggle="modal" href="#form-content"

应该有 data-target

而不是 href

<a data-toggle="modal" data-target="#form-content"

请确保模态内容已加载

我认为问题是，显示模态被调用了两次，一个在 ajax 调用中，工作正常，你说模态显示正确，但错误可能伴随着该按钮上的初始化动作，应该处理模态，这个动作不能被执行，因为当时没有加载模态。

【讨论】：