我正在搜索框下方创建一个建议框。我想要它,以便当用户将焦点放在搜索框中,然后单击其中一个建议时,它会触发一个操作。我试过使用 jquery 的 on
:
$(".searchbox + div").on("click", "a", function() {
$(".searchbox").val($(this).html());
});
我的 HTML 结构是这样的:
<input type="search" placeholder="Search" class="searchbox">
<div></div>
链接动态插入到输入后的 div
中。
这些链接没有 href
值,所以它们不是真正的链接,我只是希望它们像链接一样工作。
当我单击其中一个链接时,搜索框失去焦点,并且由于我拥有的 CSS,链接变得 visibility:hidden
。我认为搜索框在链接操作被触发之前失去了焦点,所以它永远不会被触发。我该如何解决这个问题?
可以看到here .
澄清:我认为正在发生的事情:
用户点击链接
计算机认为,用户只是在搜索框外单击
搜索框变模糊
CSS 发现搜索框模糊,样式表示现在提出建议
visibility:hidden
现在链接不再可点击,因此永远不会触发该事件。
最佳答案
在您的代码中的某处,您有一个点击处理程序,它将搜索栏带到顶部,并将 UI 的其余部分带入 View 。它在用户单击搜索栏以外的任何地方时执行。您应该添加一个语句来检查单击的元素是否为 <a>
。建议框中的元素。
因此,如果这是点击处理程序。我也认为是时候添加 id
了你的建议股利。
$(document).click(function(e){
var $clicked = $(e.target);
if($clicked.tagName == 'A' && $clicked.closest('#suggestionDivId').length>0)
$(".searchbox").val($(this).html());
else if(click was outside searchbar)
//move searchbar up and show UI
else
//click happened inside searchbar, do nothing.
})
我不确定为什么没有人理解您的问题,或者为什么这个问题被否决了。这是一个完全有效的问题。
编辑:
我建议用另一个 div 包装输入和建议 div。给这个包装器一个属性 tabindex="-1"
所以它可以接收模糊/聚焦事件。
<div id="wrapper">
<input type="search" placeholder="Search" class="searchbox">
<div></div>
</div>
然后改变你的$(".searchbox").on("blur")
至 $("#wrapper").on("blur")
这样您就可以在不触发模糊的情况下单击建议框中的任意位置。
或者,mousedown
事件在 blur
之前触发事件。所以也许试试这个
$(".searchbox + div").on("mousedown", "a", function() {
$(".searchbox").val($(this).html());
});
关于javascript - 当焦点位于文本框中时,Jquery on click 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35762955/