TypeError：$（...）。modal不是一个带引导模式的函数 [英] TypeError: $(...).modal is not a function with bootstrap Modal

问题描述

我有一个引导2.32模态，我试图动态插入到另一个视图的HTML。我正在使用Codeigniter 2.1。 动态地将引导模式局部视图插入视图，我有：

 < div id =modal_target>< / div> 
  

作为插入的目标div。我在我的视图有一个按钮，看起来像：

 < a href =＃messageclass =btn btn- large btn-infodata-action =Messagedata-toggle =tab> Message< / a> 
  

我的JS有：

  $。ajax（{
 type：'POST'，
 url：AjaxUpdate / get_modal，
 cache：false，
 success：function数据）{
 if（data）{
 $（'＃modal_target'）。html（data）; 
 
 //显示模态
 $ ＃form-content'）。modal（）; 
} 
} 
}）; 
  

主视图的按钮是：

 < div id =thanks>< p>< a data-toggle =modalhref =＃form-contentclass =btn btn-primary btn-large>模态功率，激活！< / a>< / p>< / div> 
  

这里是我想分开存储为部分视图：

 < div id =form-contentclass =modal hide fade instyle =display：none;& 
< div class =modal-header> 
< a class =closedata-dismiss =modal>×< / a> 
< h3>向我发送消息< / h3> 
< / div> 
< div class =modal-body> 
< form class =contactname =contact> 
< fieldset> 
 
<！ - 表单名称 - > 
 
< legend> modalForm< / legend> 
 
<！ - 文本输入 - > 
< div class =control-group> 
< label class =control-labelfor =user> User< / label> 
< div class =controls> 
< input id =username =usertype =textplaceholder =Userclass =input-xlargerequired => 
< p class =help-block> help< / p> 
< / div> 
< / div> 
 
<！ - 文本输入 - > 
< div class =control-group> 
< label class =control-labelfor =old>旧密码< / label> 
< div class =controls> 
< input id =oldname =oldtype =textplaceholder =placeholderclass =input-xlarge 
< p class =help-block> help< / p> 
< / div> 
< / div> 
 
<！ - 文本输入 - > 
< div class =control-group> 
< label class =control-labelfor =new>新密码< / label> 
< div class =controls> 
< input id =newname =newtype =textplaceholder =placeholderclass =input-xlarge> 
< p class =help-block> help< / p> 
< / div> 
< / div> 
 
<！ - 文本输入 - > 
< div class =control-group> 
< label class =control-labelfor =repeat>重复新密码< / label> 
< div class =controls> 
< input id =repeatname =repeattype =textplaceholder =placeholderclass =input-xlarge> 
< p class =help-block> help< / p> 
< / div> 
< / div> 
 
 
 
< / fieldset> 
< / form> 
< / div> 
 
 
< div class =modal-footer> 
< input class =btn btn-successtype =submitvalue =Send！ ID =submit> 
< a href =＃class =btndata-dismiss =modal> Nah。< / a> 
< / div> 
< / div> 
 

当我点击按钮，模态被正确插入，但我得到以下错误： p>



  TypeError：$（...）modal不是函数
  
解决方案
强调 mwebber 在评论中说：
 
 
还要检查jQuery是否不包含两次
 
 
：）
 
 
 
这是我的问题
 
I have a bootstrap 2.32 modal which I am trying to dynamically insert into the HTML of another view. I'm working with 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. 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:
$.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?
解决方案
i just want to emphasize what mwebber said in the comment:

  
also check if jQuery is not included twice
:)

it was the issue for me

                        
这篇关于TypeError：$（...）。modal不是一个带引导模式的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！