TypeError：$(...).modal不是带引导模式的函数
TypeError：$(...).modal不是带引导模式的函数
提问于 2014-11-21 22:57:38
我有一个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 我该如何解决这个问题呢？
回答 10
Stack Overflow用户
发布于 2015-01-27 23:01:54
这个错误实际上是因为您在调用modal函数之前没有包含bootstrap的javascript。Modal是在bootstrap.js而不是jQuery中定义的。同样重要的是要注意，bootstrap实际上需要jQuery来定义modal函数，因此在包含bootstrap的javascript之前包含jQuery是至关重要的。为了避免这个错误，只需确保在调用modal函数之前包含jQuery，然后包含bootstrap的javascript即可。我通常在我的header标签中执行以下操作：
<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>Stack Overflow用户
发布于 2016-09-03 21:54:22
将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>
Stack Overflow用户
发布于 2019-04-23 05:49:17
我已经在react中通过这样使用它解决了这个问题。
window.$('#modal-id').modal();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27064176
复制相关文章
相似问题