序言:我知道这个问题很老了，但是，就我而言，不是由于加载两次 Jquery
我的html代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/bootstrap.min.js"></script>
<title>Maiscai</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Maiscai v0.03</a>
</div>
</nav>
<div class="container-fluid">
<div class="row" id="progress_bar_row">
<div clas="col-sm-12">
<div class="progress col">
<div class="progress-bar progress-bar-info"
role="progressbar"
style="width: 0%">
</div>
</div>
</div>
</div>
<div class="row" id="result_row">
<div class="col-sm-12" id="result_cell"></div>
</div>
<div class="row" id="log_row" style="border: 1px solid gray;">
<div class="col-sm-12">
<div id="log" style="overflow: auto;"></div>
</div>
</div>
</div>
<!-- Modal -->
<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">Modal title</h4>
</div>
<div class="modal-body">
... this is the 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">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/cache.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
在文件 js/index.js 中我定义了这个
// Application bootstapper
initialize: function() {
document.addEventListener(
'deviceready',
app.onDeviceReady,
false
);
}
onDeviceReady: function() {
....
// Modal triggers
$(document).on('click','.list-group-item', function (){
$('#myModal').modal("show");
});
....
},
请注意，实际上我将事件绑定(bind)到文档，因为 .list-group-item 元素是在运行时创建的。
问题是:当我单击其中一项时，出现此错误
I/chromium( 6186): [INFO:CONSOLE(53)] "Uncaught TypeError: Object [object Object] has no
method 'modal'", source: file:///android_asset/www/js/index.js (53)
我已经尝试通过 jQuery 1.11.3 和最新的 2.x 可用，但同样的问题。
Bootstrap 版本为 3.3.6
最佳答案
感谢@adeneo评论，我发现了问题:由于路径中的错误，根本没有包含bootstrap.min.js文件。
关于javascript - Cordova 和 Bootstrap : unable to open a modal via javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34157930/