类型错误: $(...).模态不是带有自举模态的函数

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

我该如何解决这个问题?


答案 1

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

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

:)

这是我的问题


答案 2

此错误实际上是由于您在调用函数之前未包含 bootstrap 的 javascript 而导致的。Modal 是在 bootstrap 中定义的.js而不是 jQuery。同样重要的是要注意,bootstrap实际上需要jQuery来定义函数,所以在包含bootstrap的javascript之前包含jQuery是至关重要的。为了避免错误,请确保在调用函数之前包含jQuery,然后引导的javascript。我通常在我的标题标签中执行以下操作:modalmodalmodal

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