ディスプレイ：どれも私は検索候補と検索ボックスを持っているjQueryの

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

これまでのところは良いです。 display:noneがあるので、

は

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

問題は、検索提案項目をクリックすると、フォーカスを失うテキストボックスが発生している：

は今、私は、ユーザーが検索の提案項目をクリックしたときにテキストボックスを自動入力したいです検索候補アイテムに設定すると、clickイベントは発生しません。

display:noneコードを削除すると、すべて正常に機能します。

この競合を回避するにはどうすればよいですか？

Answer 1

あなたのblurハンドラ内で小さなtimeoutを追加することでこの問題を回避することができ、例えば、これを試してみてください。

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

Answer 2

が伝播すると、フォーカスを失う要素を引き起こしてからマウスダウンイベントを防ぎthisソリューション、になってしまいましたクリック前（マウスアップが必要）は発射されます：

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