繰り返しAjaxリクエスト

Question

$('#input').focusin(function() { 
 
    $('#div').show(); 
 
    
 
    $('#input').keyup(function() { 
 
    $('#div').show(); 
 
    //AJAX-REQUEST// 
 
    }); 
 
}); 
 

 
$('#input').focusout(function() { 
 
    $('#div').hide(); 
 
});

#div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="input"> 
 
<div id="div">Hello World</div>

こんにちは、ここに私のコードでは、それが表示され、divしばらくはinとoutをfoucsed隠し、

私はctrlを押して、shift 、arrows,spaceまたはtabこれはAJAXリクエストがないため、正常に動作し、divが表示されます。

しかし、AJAX Requestを追加するたびに、前述のいずれかのキーを押すたびにAJAX Requestが送信され、divがリフレッシュされます。

AJAX Requestを追加したときのこの動作を防止するにはどうすればよいですか？

Answer 1

まず、あなたがfocusinハンドラの外keyupハンドラを移動しなければならないことに注意してください。現在、入力をクリックするたびに別のAJAXリクエストを追加します。

この問題に対処するために、空白以外の文字が入力されたときにのみAJAXリクエストを作成すると仮定しています。その場合は、代わりにkeypressイベントを使用してください。

もinputの子要素が存在しないようfocus()とblur()がfocusin()とfocusout()上でここよりセマンティックになることに注意してください。これを試してみてください：

$('#input').focus(function() { 
 
    $('#div').show(); 
 
}).blur(function() { 
 
    $('#div').hide(); 
 
}).keypress(function() { 
 
    console.log('Making an AJAX request now...'); 
 
});

#div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="input"> 
 
<div id="div">Hello World</div>

`focusin`ハンドラの` keyup`イベントハンドラ*外*を移動し

Answer 2

一般的なキーアップのハンドラを登録していますが、その要素がフォーカスされている場合にのみハンドラを実行します。

$('#input').focusin(function() { 
    $(this).data('focused', true); 
    $('#div').show(); 
}); 
$('#input').focusout(function() { 
    $(this).data('focused', false); 
}); 
$('#input').keyup(function() { 
    if (!$(this).data('focused')) { 
     return; 
    } 
    $('#div').show(); 
    //AJAX-REQUEST// 
});