javascript - TypeError：$（…）.modal不是带有Bootstrap Modal的函数(TypeError: $(…).modal is not a function with bootstrap Modal)

Question

I have a bootstrap 2.32 modal which I am trying to dynamically insert into the HTML of another view.

(我有一个bootstrap 2.32模态，试图将其动态插入另一个视图的HTML中。)

I'm working with Codeigniter 2.1.

(我正在使用Codeigniter 2.1。)

Following Dynamically inserting a bootstrap modal partial view into a view , I have:

(在向视图中动态插入引导模式部分视图之后 ，我具有：)

<div id="modal_target"></div>

as the target div for insertion.

(作为要插入的目标div。)

I have a button in my view that looks like:

(我的视图中有一个按钮，看起来像：)

     <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>

My JS has:

(我的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();
       }
    }
});

The button of the main view is:

(主视图的按钮是：)

<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>

Here is what I'd like to store separately as a partial view:

(这是我想作为局部视图单独存储的内容：)

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

When I click the button, the modal is inserted correctly, but I get the following error:

(当我单击按钮时，模态已正确插入，但是出现以下错误：)

TypeError: $(...).modal is not a function 

How can I fix this?

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

  ask by user61629 translate from so

Answer 1

i just want to emphasize what mwebber said in the comment:

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

also check if jQuery is not included twice

(还检查jQuery是否不包含两次)

:)

(:))

it was the issue for me

(这是我的问题)