TypeError:$(…).modal不是具有引导模式的函数

我有一个引导2.32模式,我试图dynamic插入到另一个视图的HTML。 我正在与Codeigniter 2.1合作。 以下dynamic插入引导模态部分视图到视图中 ,我有:

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

作为插入的目标div。 我在我的视图中有一个button,如下所示:

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

主视图的button是:

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

当我点击button,模式插入正确,但我得到以下错误:

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

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

我只是想强调一下在评论中所说的话:

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

🙂

这是我的问题

这个错误实际上是你在调用modal函数之前不包括bootstrap的javascript的结果。 Modal在bootstrap.js而不是jQuery中定义。 另外需要注意的是,bootstrap实际上需要jQuery来定义modal函数,所以在包含bootstrap的javascript之前包含jQuery是非常重要的。 为了避免这个错误,在调用modal函数之前,一定要包含jQuery和bootstrap的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> 

连接你的jquery和bootstrap之后,在jquery和bootstrap脚本标记的下面写下你的代码。

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

检查jquery库是否包含在您的AjaxUpdate/get_modal通过Ajax .remove <script src="~/Scripts/jquery[ver].js"></script> AjaxUpdate/get_modal

另一种可能性是其中包含的其他脚本之一引起的问题也包括JQuery或与$冲突。 尝试删除其他包含的脚本,看看是否解决了这个问题。 在我的情况下,经过几个小时的不必要的search我的一个代码,我删除了二进制search模式的脚本,并立即发现了违规脚本。

在我的情况下,我使用rails框架,并要求jQuery两次。 我认为这是一个可能的原因。

你可以先检查app / assets / application.js文件。 如果出现jquery和bootstrap-sprockets,则不需要第二个库的要求。 该文件应该类似于这个:

 //= require jquery //= require jquery_ujs //= require turbolinks //= require bootstrap-sprockets //= require_tree . 

然后检查app / views / layouts / application.html.erb,并删除需要jQuery的脚本。 例如:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

我觉得有时候新手使用多个教程代码的例子会导致这个问题。

我想你应该用你的button

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

而不是href应该有数据目标

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

只要确定,模式内容已经加载

我认为问题是,显示模态被称为两次,一个在Ajax调用,工作正常,你说模式显示正确,但错误可能与该button上的init动作,应该处理模式,这个动作不能被执行,因为当时没有加载模态。

我遇到过同样的问题。 更改

 $.ajax(...) 

 jQuery.ajax(...) 

不工作。 但后来我发现jQuery包含了两次 ,删除其中一个修复了问题。

根据我的经验,最有可能的是它发生在jQuery版本(使用多版本)冲突,为了解决这个问题,我们可以使用一个不冲突的方法,如下所示。

 jQuery.noConflict(); (function( $ ) { $(function() { // More code using $ as alias to jQuery $('button').click(function(){ $('#modalID').modal('show'); }); }); })(jQuery);