类型错误:$(...).modal不是一个函数,使用Bootstrap Modal。

122

我有一个Bootstrap 2.32的模态框,我正在尝试将它动态插入到另一个视图的HTML中。我使用Codeigniter 2.1开发。根据Dynamically inserting a bootstrap modal partial view into a view,我的代码如下:

<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 

我该如何修复这个问题?


48
请检查是否适用于 jQuery(...).modal。您的 jQuery 可能处于兼容模式,还要检查是否重复引入了 jQuery。 - mwebber
9
在调用.modal()之前,bootstrap.js未被加载的可能性很大。 - LJ Wadowski
4
它的意思是:尝试使用 jQuery('#form-content').modal(); - vp_arth
2
使用jQuery('#form-content').modal()代替$('#form-content').modal()。 - Himaan Singh
2
任何来这里找答案的人,像我一样,请看一下是.modal()而不是model()。这是一个如此愚蠢的错误。让我筋疲力尽。 :( - guitarlass
显示剩余4条评论
15个回答

2
对我而言,我在//= require bootstrap之后加了//= require jquery。当我把jquery放在bootstrap之前时,一切正常。"Original Answer"的意思是"最初的回答"。

2

在我的react.js应用程序中,其他答案对我没有用,所以我使用了纯JavaScript。

以下解决方案有效:

  1. 为模态/对话框的关闭部分(在下面的示例中为“myModalClose”)提供一个id
<span>
   className="close cursor-pointer"
   data-dismiss="modal"
   aria-label="Close"
                     id="myModalClose"
>
...
生成一个点击事件到上面的关闭按钮,使用这个id:
   document.getElementById("myModalClose").click();
也许您可以使用jQuery来生成相同的关闭按钮点击。
希望能对您有所帮助。

这被认为是一种良好的实践吗? - MertHaddad

1
我有同样的问题。更改

$.ajax(...)

to

jQuery.ajax(...)

原来我的代码没有起作用,后来发现jQuery被重复引入了,移除其中一个就解决了问题。


0

也可能是在加载JavaScript文件之前调用了Bootstrap模态框,这就是我遇到的情况。我在页面加载时调用了一个函数,导致出现了这个错误。通过通过onload事件调用该函数来解决问题。

window.onload = function () {
  callYourFunctionOrAjaxHere();
}

-2

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

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

应该使用data-target而不是href

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

请确保模态内容已经加载

我认为问题在于,模态显示被调用了两次,其中一个是ajax调用,这个工作正常,你说模态正确显示了,但错误可能出现在处理模态的按钮上的init操作,因为此时无法执行该操作,因为模态尚未加载。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接