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

Question

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

这是代码的链接（这里的代码编辑器不喜欢脚本和HTML的混合，并且正在测试我的耐心对不起）。 可在此处查看Gist代码段

它正在使用Bootstrap。 问题是这个工作正常（它显示一个文本输入用斧头清除它，当你按下它清除文本输入框）。 当我包括......

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

但是，单击输入框中的x不会执行任何操作。 谁能看到任何明显的原因？

没有CSS包括它没关系。 包含CSS它失败了。

css文件基本上是一个庞大的编译.less文件，可能不适合放在这里的代码框中，所以这里是另一个gist链接。

更新：如果有帮助，这是控制台日志：在此输入链接描述

Answer 1

您的javascript文件链接和事件处理程序代码的位置不正确。 您正在调用$("#searchclear").click(.....在加载jQuery之前，所有链接的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>

Answer 2

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

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-05-13 06:51:30

工作演示

解决方案2
-2 2015-05-13 05:54:28

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-05-13 06:51:30

工作演示

解决方案2 -2 2015-05-13 05:54:28

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

解决方案1
2 已采纳 2015-05-13 06:51:30

解决方案2
-2 2015-05-13 05:54:28