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

基本上，任何时候单击div内的链接(即.hideme a(，<div>是隐藏的。

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

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