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

IT技术 javascript jquery css twitter-bootstrap twitter-bootstrap-2
2021-01-24 19:52:56

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

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

6个回答

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

还要检查 jQuery 是否不包含两次

:)

这对我来说是个问题

还要确保没有其他库将 jQuery 捆绑在他们自己的最小文件中（DataTables 在某些情况下会这样做）
2021-03-26 19:52:56
当我将较低版本的 jquery 放在 ie8 的条件包含中时也发生了。<!--[如果是 IE 9]>
2021-03-27 19:52:56
……在这种情况下，人们会做什么？@gillytech
2021-04-02 19:52:56
不要忘记检查导入，例如： import '../jquery-3.3.1.js';
2021-04-03 19:52:56
记住：一定要检查 jQuery 的 ajax 调用文件。
2021-04-07 19:52:56

这个错误实际上是你在调用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>
谢谢@davetw12，它帮助了很多
2021-04-02 19:52:56
正确答案。:-)
2021-04-11 19:52:56

链接您的 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>

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

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

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

其它你可能感兴趣的问题
上一篇在 Gmail 邮件中以 HTML 表格形式通过电子邮件发送 Google 表格范围（带格式或不带格式） 下一篇使用返回Promise的函数过滤数组