rob*_*ter 5 html javascript css jquery twitter-bootstrap
我有一段代码一直工作正常,直到我包含一些CSS.
这是代码的链接(这里的代码编辑器不喜欢脚本和HTML的混合,并且正在测试我的耐心对不起). 可在此处查看Gist代码段
它正在使用Bootstrap.问题是这个工作正常(它显示一个文本输入用斧头清除它,当你按下它清除文本输入框).当我包括......
<!-- CSS -->
<link href="css/app.css" rel="stylesheet">
但是,单击x输入框中的任何内容都不会.谁能看到任何明显的原因？
没有CSS包括它没关系.包含CSS它失败了.
css文件基本上是一个庞大的编译.less文件,可能不适合放在这里的代码框中,所以这里是另一个gist链接.
更新:如果有帮助,这是控制台日志:在此 输入链接描述
您的 JavaScript 文件链接和事件处理程序代码的位置不正确。您在加载 jQuery 之前调用$("#searchclear").click(.....，并且所有链接的 js 文件应该位于结束body标记之前，而不是之后。将您的更改html为以下内容将解决此问题：
（请注意，我更改了一些链接以链接到文件的 CDN 版本，以避免演示中出现错误）：
<!DOCTYPE html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<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>create appt</title>
<!-- Vendor CSS -->
<link href="vendors/animate-css/animate.min.css" rel="stylesheet">
<!-- CSS -->
<link href="css/app.css" rel="stylesheet">
<!-- Following CSS codes are used only for specifics in this test-->
<style type="text/css">
.margin-bottom > * {
margin-bottom: 20px;
}
#searchclear {
position: absolute;
right: 5px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
}
</style>
</head>
<body>
<div class="btn-group">
<input id="searchinput" type="search" class="form-control" value="LUNCH">
<span id="searchclear" class="glyphicon glyphicon-remove-circle"></span> </div>
<!-- Javascript Libraries -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="vendors/nicescroll/jquery.nicescroll.min.js"></script>
<script src="vendors/waves/waves.min.js"></script>
<script src="vendors/bootstrap-growl/bootstrap-growl.min.js"></script>
<script src="vendors/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
<script src="vendors/sweet-alert/sweet-alert.min.js"></script>
<script src="js/functions.js"></script>
<script>
$("#searchclear").click(function(){
$("#searchinput").val('');
});
</script>
</body>
</html>