And*_*erg 1 html javascript css jquery
我有以下html文件:
<!DOCTYPE html>
<html>
<head>
<link href="example.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<form class="search">
<div class="search_box">
<input type="text" name="q" id="search_text" placeholder="Search..." />
<ul id="search_results" class="results" >
<li><a href="">Search Result #1<br /><span>Description...</span></a></li>
<li><a href="">Search Result #2<br /><span>Description...</span></a></li>
</ul>
</div>
</form>
<script type="text/javascript">
$(document).on('click', '#search_results li',function(i) {
i.preventDefault();
console.log('clicked');
});
</script>
</body>
</html>
而css看起来像这样:
.search .search_box input:focus + .results { visibility: visible }
.search .search_box .results {
visibility:hidden;
}
如果未包含css,则文档按预期工作,并在单击其中一个锚标记时打印"单击",但在包含css时不打印.
所以我怀疑在执行javascript之前该项是隐藏的.我真的很喜欢css解决方案而不是隐藏和切换javascript语句.
有没有办法解决这个问题？
更改click()到mousedown().click事件包括一个鼠标注册,到那时焦点已经丢失.
$(document).on('mousedown', '#search_results li', function (i) {
i.preventDefault();
console.log('clicked');
});
| 归档时间： |
|
| 查看次数： |
235 次 |
| 最近记录： |