[英]bootstrap modal $(…).modal is not a function
I'm trying to open a bootstrap modal dialog when clicking the span, I've searched the internet for solutions to my problem bootstrap modal $(...).modal is not a function but the only solution I've found is " put jQuery scripts before bootstrap scripts because bootstrap depends on jQuery " so I've put jQuery first, and it still gives me the same error: bootstrap modal $(...).modal is not a function 单击范围时,我试图打开一个引导程序模态对话框,我在互联网上搜索了我的问题引导程序模态$(...)的解决方案。模式不是函数,但我发现的唯一解决方案是“将jQuery脚本放在引导程序脚本之前,因为引导程序取决于jQuery“,因此我将jQuery放在第一位,它仍然给我相同的错误: 引导程序模态$(...)。modal不是函数
Here's the code I've tried with so far: 到目前为止,这是我尝试过的代码:
HTML HTML
<span value="${bean.getId(i)}" class="glyphicon glyphicon-remove spanRemoveTransaction" style="color:red; cursor: pointer; margin-top:8px;" nowrap="true" data-toggle="myModal" data-target="#modal"></span>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Are you sure you want to delete this transaction?</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="delete">Delete</button>
</div>
</div>
</div>
</div>
jQuery jQuery的
$(".spanRemoveTransaction").on('click', function (e) {
theTransactionId = $(this).attr("value");
e.preventDefault();
deleteTransactionModal(theTransactionId, e);
});
function deleteTransactionModal(theTransactionId, e) {
e.preventDefault();
$('#myModal').modal({
keyboard: false
}).on('click', '#delete', function (e) {
var url = config.deploymentIp + "/Controller?deleteTransaction";
var transactionId = "";
$.ajax({
dataType: "json",
type: "POST",
url: url,
data: {transactionId: theTransactionId},
success: function (data, textStatus, jqXHR)
{
if (!data["has_errors"]) {
$('table#transactionList tr#'+theTransactionId).remove();
} else {
transactionId = data.errors["transactionId"];
if (transactionId === "transactionIdError") {
}
}
}
});
});
}
Scripts 剧本
<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="includes/selectpicker.js" type="text/javascript"></script>
<script src="js/currencyExchange.js" type="text/javascript"></script>
<script src="js/atbottom.js" type="text/javascript"></script>
<script src="js/config.js"></script>
<script src="includes/loadBottomScript.js" type="text/javascript"></script>
<script src="js/menuScript.js" type="text/javascript"></script>
<script src="js/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="includes/datepicker.js" type="text/javascript"></script>
<script src="js/transfers.js" type="text/javascript"></script>
If anyone has a solution to this, or just happen to have fresh eyes and can help me locate the problem, it would be greatly appreciated. 如果有人对此有解决方案,或者刚好有新鲜的眼睛可以帮助我定位问题,将不胜感激。
You are using jQuery.noCoflict
您正在使用
jQuery.noCoflict
Here is a jsFiddle 这是一个jsFiddle
Use 采用
jQuery.noConflict();
jQuery('#myModal') ....
Please tell me if it works or not. 请告诉我它是否有效。
UPDATE UPDATE
As @dashtinejad point to another thing in his comment after the no conflict: 正如@dashtinejad在无冲突后的评论中指出的另一件事:
Other parts of script which rely on $
should change to jQuery
also 依赖
$
的脚本的其他部分也应更改为jQuery
$(document).ready(function () { // Attach Button click event listener $('.glyphicon-remove spanRemoveTransaction').click(function(){ // show Modal alert("pp") $('#myModal').modal('show'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <span value="${bean.getId(i)}" class="glyphicon glyphicon-remove spanRemoveTransaction" style="color:red; cursor: pointer; margin-top:8px;" nowrap="true" data-toggle="modal" data-target="#myModal">click the span</span> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Are you sure you want to delete this transaction?</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id="delete">Delete</button> </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.