當我添加我的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