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