我有一段代码在我包含一些 css 之前一直运行良好。
这是代码的链接(这里的代码编辑器不喜欢脚本和 html 的混合，正在考验我的耐心，抱歉)。 Gist code snippet can be viewed here
它正在使用 Bootstrap。问题是这工作正常(它显示带有 x 的文本输入以清除它，当您按 x 时它清除文本输入框)。当我包括...
<!-- CSS -->
<link href="css/app.css" rel="stylesheet">
不过，点击输入框中的x没有任何作用。任何人都可以看到任何明显的原因吗？
不包含 CSS 也没问题。如果包含 CSS，它会失败。
css 文件基本上是一个巨大的编译 .less 文件，可能不适合放在此处的代码框中，所以 here it is in another gist link .
更新:如果有帮助，这里是控制台日志:enter link description here
最佳答案
您的 javascript 文件链接和事件处理程序代码的位置不正确。在加载 jQuery 之前调用 $("#searchclear").click(..... 并且所有链接的 js 文件都应该在结束 body 之前标记，而不是在它之后。将 html 更改为以下内容将解决此问题:
Working Demo
(请注意，我更改了一些链接以链接到文件的 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>
关于当我添加我的 css 时，Javascript 文本输入清除按钮在 Bootstrap 中停止工作。有什么建议吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30205820/