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();
    });
});

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

1 个答案: