gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 16:45:55 26 4
gpt4 key购买 nike

我有一段代码在我包含一些 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com