TypeError:$(…).modal不是带有Bootstrap Modal的函数


92

我有一个bootstrap 2.32模态,试图将其动态插入另一个视图的HTML中。我正在使用Codeigniter 2.1。在向视图中动态插入引导模式部分视图之后,我具有:

<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 

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


38
检查是否可以使用jQuery(...).modal。您的jQuery可能处于兼容模式,还请检查是否没有两次包含jQuery。
mwebber 2014年

7
在您尝试调用.modal()之前,很有可能没有加载bootstrap.js
LJ Wadowski

1
mwebber-我对js不熟悉,我如何“检查它是否可以与jQuery(...)。modal一起使用”。我以某种方式假设在控制台中?在所有这些发生之前,Etsitra,bootstrap.js会被加载到头文件中。
user1592380

3
这意味着:试试jQuery('#form-content').modal();
vp_arth

2
而不是$('#form-content')。modal(); 使用jQuery('#form-content')。modal();
Himaan Singh

Answers:


170

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

还检查jQuery是否不包含两次

:)

这是我的问题


1
切记:一定还要检查jQuery的ajax文件。
弗拉基米尔·弗雷格

当我将较低版本的jquery放在ie8的条件包含中时,也会发生这种情况。<!-[if lt IE 9]>
詹妮弗·米歇尔

5
还要确保没有其他库将jQuery捆绑在自己的min文件中(在某些情况下DataTables
会这样做

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

1
...在那种情况下,人们会做什么?@gillytech
补救

77

此错误实际上是由于您在调用modal函数之前未包含引导程序的javascript导致的。模态是在bootstrap.js中而不是jQuery中定义的。还需要注意的是,引导程序实际上需要jQuery来定义modal函数,因此在包含引导程序的javascript之前包含jQuery非常重要。为了避免该错误,请确保在调用该modal函数之前先包含jQuery,然后包含引导程序的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,它对我们有很大帮助
WEshruth

40

链接完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>


7

检查jquery不包含在HTML库,通过负载Ajax卸下摆臂<script src="~/Scripts/jquery[ver].js"></script>AjaxUpdate/get_modal


7

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



4

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

在项目中添加jQuery类型到您的Angular项目中。之后包括

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文件的types字段中包括“ jquery”。

这将删除Angular项目中的所有'modal'和'$'错误。


3

以我的经验,最有可能发生在jquery版本(使用多个版本)冲突中,为了解决问题,我们可以使用如下所示的no-conflict方法。

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

3

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

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

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

jQuery slim不包含modal()。
Ryan Griggs

2

就我而言,我使用Rails框架,并且需要jQuery两次。我认为这是一个可能的原因。

您可以先检查app / assets / application.js文件。如果出现jquery和bootstrap-sprockets,则不需要第二个库require。该文件应与此类似:

//= 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>

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



1

我遇到过同样的问题。改变中

$.ajax(...)

jQuery.ajax(...)

不工作。但是后来我发现jQuery被包含了两次,删除其中之一解决了问题。


0

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

以下解决方案有效:

  1. 为模态/对话框的关闭部分提供一个ID(在下面的示例中为“ myModalClose”)
<span>
   className="close cursor-pointer"
   data-dismiss="modal"
   aria-label="Close"
                     id="myModalClose"
>
...
  1. 使用该ID为上方的关闭按钮生成click事件:
   document.getElementById("myModalClose").click();

可能您也可以使用jQuery在关闭按钮上产生相同的单击。

希望能有所帮助。


-1

我想你应该在按钮中使用

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

而不是href应该有数据目标

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

只需确保已加载模态内容

我认为问题是,显示模态被调用了两次,一次在ajax调用中,效果很好,您说模态被正确显示,但是该按钮上的init操作可能会出现错误,该按钮应该处理模态,此操作无法执行,因为当时未加载模式。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.