jQuery - 单击链接失败，因为包含元素预先消失

Question

我正在为输入字段编写一个简单的建议框。 当我单击该字段时，该框下方会出现一个隐藏元素，其中包含一些与该字段内容匹配的链接。

当输入字段失去焦点时，建议框被编程为消失。

但是，当我尝试单击建议框中的任何链接时，输入字段首先失去焦点，导致包含所有链接的建议框消失，并且单击事件“未命中目标”。

我试图在这里演示这种行为： https : //jsfiddle.net/fugasjunior/cxh8bmp9/1/

<input placeholder="some text here">
<div class="hideme" style="display:none">
  <a href="google.com" target="_blank">Link to some site</a>
</div>

$("input").focus(function () {
  $(".hideme").css("display", "block");
});

$("input").blur(function () {
  $(".hideme").css("display", "none");
});

我的临时解决方案是在隐藏元素之前设置一个小的超时时间。 但是，我认为这太不可靠了，总体而言不是理想的解决方案。 这个问题有没有更好的解决方案？ 谢谢！

Answer 1

一种解决方案是捕获<div>内链接的点击事件并将display更改为none 。 例如：

$( "input" ).focus( function () {
    $( ".hideme" ).css( "display", "block" );
} );

$( ".hideme a" ).click( function () {
    $( ".hideme" ).css( "display", "none" );
} );

基本上， .hideme a点击div内的链接（即.hideme a ）， <div>就会隐藏。

然而，这可能不是理想的解决方案，因为它需要识别与隐藏<div>相关的所有事件（即默认情况下单击页面上的其他地方不会隐藏<div> ）。 或者，可以将<input>元素更改为捕获.click以打开和关闭显示，以便用户还可以通过再次单击<input>元素来重新隐藏<div> 。

抱歉，这可能无法完全回答原始问题。