Question

I am using arrow key navigation for table. Based on current selected row I have to load some details in a div. after selecting a row it will make Ajax call to server to get more details and load that detail in a div. This might take some time to make Ajax call and and update div. Within this time I want to disable key down event.

     $('#tbl tbody').on('keydown', function (event) {

        var keyCode = event.keyCode;

        if (keyCode >= 37 && keyCode <= 40) {
            event.preventDefault();
            ChangeTarget(keyCode)
        }
    });

I just want to unbind or suspend keydown event just for some time.

i tried to use time out but that is not helping me as i want.

$('#tbl tbody').on('keydown', function (event) {
            var keyCode = event.keyCode;

            if (keyCode >= 37 && keyCode <= 40) {
                event.preventDefault();
                ChangeTarget(keyCode);
                setTimeout(function () {
                }, 10000);
            }
        });

i don’t want to record any key event until Ajax complete its job !!!

Answer 1

You can use a boolean flag instead of unbind.

Here is an example:

var keyNavigationDisabled = false;

$('#tbl tbody').on('keydown', function (event) {
    if (keyNavigationDisabled) return;
    var keyCode = event.keyCode;
    if (keyCode >= 37 && keyCode <= 40) {
        event.preventDefault();
        ChangeTarget(keyCode)
    }
});

function getRemoteData() {
    keyNavigationDisabled = true;
    $.ajax({
        url: 'http://example.com',
        complete: function () {
           keyNavigationDisabled = false;
        }
    });
}