Question

我有一个带搜索建议的搜索框：

<input id="searchBar" />
<div id="searchSuggestion"></div>

当输入（代码未显示）时，div searchSuggestion会自动通过jQuery ajax更新。要隐藏/显示自动填充建议（显示在搜索文本框下方），我使用：

$searchBar.blur(function () {
    $searchSuggestion.css("display", "none");
});
$searchBar.focus(function () {
    $searchSuggestion.css("display", "");
});

到目前为止一切顺利。

现在，我想在用户点击搜索建议项时自动填充文本框：

$searchSuggestion.on("click", ".item", function () {
    alert("clicked");
});

问题是，点击搜索建议项会导致文本框失去焦点，因此会在搜索建议项目上设置display:none，这会导致click事件无法触发！

如果删除display:none代码，一切正常。

我如何解决这场冲突？

Answer 1

结束this解决方案，防止mousedown事件传播并导致元素在点击（需要使用mouseup）之前失去焦点：

$searchSuggestion.on("mousedown", function (e) {
    e.preventDefault();
}).on("click", ".item", function () {
    alert("clicked");
});

Answer 2

您可以在timeout处理程序中添加一个小blur来解决此问题，例如尝试此操作：

$searchBar.blur(function () {
    setTimeout(function() {
        $searchSuggestion.css("display", "none");
    }, 150);
});

显示：无阻止jQuery

2 个答案: