javascript - 当焦点位于文本框中时，单击上的jQuery不起作用

我正在搜索框下方创建一个建议框。我想要这样，以便当用户将焦点放在搜索框中，然后单击建议之一时，它会触发一个操作。我已经尝试使用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>元素。

因此，如果这是单击处理程序。我也认为是时候在您的建议div中添加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());
});