TypeError:$(...).modal不是一个带有bootstrap Modal的函数

Question

我有一个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 

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

Answer 1

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

还要检查jQuery是否包含两次

:)

这对我来说是个问题

Answer 2

这个错误实际上是你在调用modal函数之前不包括bootstrap的javascript的结果.Modal在bootstrap.js中定义,而不是jQuery.同样重要的是要注意bootstrap实际上需要jQuery来定义modal函数,所以在包含bootstrap的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>

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

Answer 4

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

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

Answer 5

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

Answer 6

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

Answer 7

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

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

Answer 8

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

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

到

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

Answer 9

跑

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 中，就在 body 结束标记之前。

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

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

Answer 10

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

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

应该使用data-target而不是 href

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

请确保模态内容已加载

我认为问题是，显示模态被调用两次，一次在ajax调用中，工作正常，你说模态显示正确，但错误可能来自该按钮上的初始化操作，应该处理模态，该操作无法执行，因为当时modal还没有加载。