我终于进入了构建网页的阶段，并且陷入了困境。我浏览了无数页，试图了解我在做什么错，但没有任何帮助。因此，我转向你。我确定我正在做一些刻骨铭心的事情，但是无法追踪。
我已经建立了一个简单的登录屏幕，并且试图获取“提交”按钮来触发点击事件并显示我的成功模式。但是，当我单击提交时，没有任何反应。 Chrome的控制台（Dev Tools）上也没有显示任何内容。我在JQuery和Bootstrap组件中遇到3个错误，但它们没有任何意义。
*jquery-1.11.2.min.js:1 Uncaught SyntaxError: Unexpected token :*
*bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery
at bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
jquery-1.11.2.min.js:1 Uncaught SyntaxError: Unexpected token :*
我的login.html代码
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Login</title>
</head>
<body style="padding-top:20px">
<div class="col-md-10 col-md-offset-1">
<div class="well">
<table class="table table-bordered">
<thead>
<tr class="success">
<td colspan="2">Login</td>
</tr>
</thead>
<tbody>
<tr>
<td>Username</td>
<td>
<input type="text" id="txtLogin" placeholder="Username" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" id="txtPassword" placeholder="Password" />
</td>
</tr>
<tr class="success">
<td colspan="2">
<input id="btnSubmit" class="btn btn-success" type="button" value="Submit" />
</td>
</tr>
</tbody>
</table>
<div class="modal fade" tabindex="-1" id="successModal" data- keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4>Success</h4>
</div>
<div class="modal-body">
<h2>Login Successful</h2>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-success">
Close
</button>
</div>
</div>
</div>
<button type="button" data-dismiss="modal" class="btn btn-success">
Close
</button>
</div>
</div>
</div>
</div>
<div id="divError" class="alert alert-danger collapse">
<a id="linkClose" class="close" href="#">×</a>
<div id="divErrorText"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#linkClose').click(function () {
$('#divError').hide('fade');
});
$('#btnSubmit').click(function () {
$('#successModal').modal('show');
});
});
</script>
</body>
</html>
最佳答案
您的jQuery无法正确加载文件，请重新下载或使用此示例有效的CDN版本
$(document).ready(function () {
$('#linkClose').click(function () {
$('#divError').hide('fade');
});
$('#btnSubmit').click(function () {
$('#successModal').modal('show');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body style="padding-top:20px">
<div class="col-md-10 col-md-offset-1">
<div class="well">
<table class="table table-bordered">
<thead>
<tr class="success">
<td colspan="2">Login</td>
</tr>
</thead>
<tbody>
<tr>
<td>Username</td>
<td>
<input type="text" id="txtLogin" placeholder="Username" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" id="txtPassword" placeholder="Password" />
</td>
</tr>
<tr class="success">
<td colspan="2">
<input id="btnSubmit" class="btn btn-success" type="button" value="Submit" />
</td>
</tr>
</tbody>
</table>
<div class="modal fade" tabindex="-1" id="successModal" data- keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4>Success</h4>
</div>
<div class="modal-body">
<h2>Login Successful</h2>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-success">
Close
</button>
</div>
</div>
</div>
<button type="button" data-dismiss="modal" class="btn btn-success">
Close
</button>
</div>
</div>
</div>
</div>
<div id="divError" class="alert alert-danger collapse">
<a id="linkClose" class="close" href="#">×</a>
<div id="divErrorText"></div>
</div>
</div>
</div>