fire jquery focus out when only the input focus is changed

Question

I use the following code to add the selected div value into a input.

    var lastFocus;
    $('.num-button').click(function(e){
        e.preventDefault();
        e.stopPropagation();
        //addOrRemoveWatermark(lastFocus);
        $(lastFocus).val($(lastFocus).val() + $(this).children('span').html());
    });
    $('.del').click(function(e){
        e.preventDefault();
        e.stopPropagation();
        //addOrRemoveWatermark(lastFocus);
        $(lastFocus).val(function(index, text){
            return text.replace(/(\s+)?.$/, '');
        });
    })

below is a sample image if the input panel I have! This is developed for a touch device and hence the key pad.

The script works fine to add value on each button press in the keypad. The problem I'm facing is for the room number I want to run an ajax call after the user has entered the amount. But since the focus is removed every button click, how can I run the script when the focus is changed to another input. I tried the jquery .focusout() method but it gets fired each and every time the user clicks on a number button.

if anyone can suggest me a work around that would be a great help! thank you!

Answer 1

Perhaps you could delay the request with something like the following:

var roomNoChanged = false;
$('#room-number').change(function() {
    roomNoChanged = true;
});

$('#table-number, #no-of-guests').focus(function() {
    if(roomNoChanged) {
        roomNoChanged = false;
        $.post(...)
    }
});