我想在单击将显示模态的链接时调用一个函数。
head
标签中导入的脚本
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
模式:
<div class="modal fade" id="modFileUpload" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Upload Plans</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="myform">
<div class="custom-file">
<input type="file" class="custom-file-input" id="myfile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="closeUploadPlansModal">Close</button>
</div>
</div>
</div>
</div>
链接:
<a class="nav-link text-left" role="button" onclick="uploadFiles()" >
<i class="fa fa-upload"></i><span class="nav-text">Upload Plans</span>
</a>
uploadFiles函数:
function uploadFiles(){
$('#modFileUpload').modal('show'); //getting error here
}
我得到错误为:
未捕获类型错误:$(…(.modal不是函数
有什么方法可以显示链接的模态点击吗?
我遇到了同样的问题,因为我在head
标记中以及在body
标记之前导入了cdn脚本。
在我的情况下,所有的都是不同的版本。
您的head
标签导入应该如下所示:
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
并确保您的代码中不应该有任何其他引导程序jquery脚本。