Question

我有一段代码一直工作正常，直到我加入一些CSS。

这是代码的链接（这里的代码编辑器不喜欢脚本和HTML的混合，并且正在测试我的耐心对不起）。 Gist code snippet can be viewed here

它正在使用Bootstrap。问题是这个工作正常（它显示一个带有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

Answer 1

您的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>

Answer 2

<!-- css -->
<link href="css/app.css" rel="stylesheet" type="text/css">

当我添加我的CSS时，Javascript文本输入清除按钮在Bootstrap中停止工作。有什么建议？

2 个答案:

Working Demo