Menu
I've a piece of code that's been working fine until I include some css.
Here is the link to the code (the code editor here didn't like the mix of script and html and was testing my patience sorry). Gist code snippet can be viewed here
It's using Bootstrap. The issue is this works fine (it displays a text input with a x to clear it and when you press the x it clears the text input box). When I include the...
<!-- CSS -->
<link href="css/app.css" rel="stylesheet">
though, clicking the x in the input box does nothing. Can anyone see any obvious reasons?
Without CSS included it's fine. With CSS included it fails.
The css file is basically a massive compiles .less file and probably not appropriate to place in a code box here so here it is in another gist link.
UPDATE: Here are the console logs if that helps: enter link description here
469
The locations of your javascript file links and event handler code are incorrect. You are calling $("#searchclear").click(..... before you load jQuery and all of the linked js files should be just before the closing body tag, not after it. Changing your html to the below will fix this issue:
(note that I changed some of the links to link to the CDN versions of the files to avoid errors in my demo):
<!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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
