如何单击链接然后失去焦点jquery

Question

我将一些链接附加到一个 div。我想要做的是，当有人点击该链接中的任何一个时，页面应该导航到该链接，否则当点击其他任何地方时，这些链接应该消失。（一个带有确切建议的搜索框。）

基本 div：

<div class="col-lg-8 col-md-8 col-sm-10">
     <input class="form-control" placeholder="Search" id="search-box">
</div>

Jquery 附加链接：

result_query = ''
$.each(search_result, function(i, item) {
    result_query = result_query + '<a href="/search/' + search_result[i][0] + '"><div class="suggestion-box"><img src="' + search_result[i][2] + '" style="height: 70px; width: 70px; margin: 5px;">' + search_result[i][1] + '</div></a>';
});
$('#search-box').after(result_query);

Jquery 删除链接：

$(document).on('blur', '#search-box', function(event) {
    $('.suggestion-box').remove();
});

现在，当我单击链接时，它会删除所有链接，并且不会将页面导航到相应的链接。我希望它导航到单击的链接，而不是删除所有链接。如何解决问题？

编辑：添加了JSFiddle

Answer 1

最简单的方法（imo）是创建一个持有者.suggestion-box。在该框中，您可以附加您的建议链接：

success: function (data) {
    $(".suggestion-box").append(data);
}

现在所有链接都附加到持有人。单击链接时，您可以导航离开。单击其他地方时，如果您使用以下代码（但未测试），建议框将淡出。

$(document).ready(function() {
    $(document).click(function() {
        $(".suggestion-box").fadeOut();
    });
});

也许您可能需要使用e.stopPropagation 或e.preventDefault：

$(document).ready(function() {
    $(".clickable-item").click(function(e) {
        e.stopPropagation();
    });
});