ぼかしに身を隠す2つのinput
要素があります。問題は、要素がDOMに非表示になっている後に続く要素をクリックした場合に、ぼかしの原因となったクリックイベントが失われることです。
クリックした要素がぼやけた要素の前にある場合、期待どおりに機能します
この単純なスニペットは、次のことを示しています。
<html>
<script src="./jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('input').blur(function(e) {
console.log('blurred');
$(this).hide();
});
$('.a').click(function() {
console.log('div clicked');
});
$(document).click(function() {
console.log('doc clicked');
});
});
</script>
<body>
<div id="div1">
<div class="a"><input /></div>
<div class="a"><input /></div>
</div>
</body>
</html>
下の入力をクリックすると、上が期待どおりに機能します。「ぼやけた」印刷、「divクリック」、「ドキュメントクリック」の順に表示され、下の入力は非表示になります。
上部の入力をクリックすると、下部の上部の入力が非表示になり、「ぼやけた」印刷のみが表示され、クリックイベントはどこでも処理できなくなります。
の呼び出しhide
がコメント化されている場合は、期待どおりに機能します。
使用.live
しても違いはありません。
これを回避する方法を考えることはできますが、どれも非常に優れています。sの順序がinput
重要である理由、またはより良い解決策について何か考えはありますか?
ありがとう。