JQuery button click event not working after adding jquery keyboard

I am trying to get user input from a textbox using jquery keyboard.js. If I omit the virtual keyboard code, it works fine.

URL: https://github.com/Mottie/Keyboard/wiki

Here is my textbox and button:

<input type="text" name="pnr" id="txtpnr" required class="form-control" placeholder="Enter PNR Number" maxlength="10">
<button type="button" name="btnCheckpnr" id="btnCheckpnr" class="btn btn-block btn-default">Get current status</button>

      

        
        
        
      

    

I have a header file like:

<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.keyboard.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>

      

        
        
        
      

    

JavaScript code for virtual keyboard:

$('#txtpnr').keyboard({
        layout: 'custom',
        customLayout: {
            'default' : [
                '8 9 {a} {c}',
                '4 5 6 7',
                '0 1 2 3',
                '{bksp}'
            ]
        },
        maxLength : 10,
        restrictInput : true, 
        useCombos : false,
        acceptValid: true,
        validate: function(keyboard, value, isClosing){
            return value.length === 10;
        }
    }).addTyping();

      

        
        
        
      

    

The code I'm using for the button:

$('#btnCheckpnr').on('click',function(){

        $('#flag-0').hide();
        $('#flag-1').hide();
        $('#flag-2').hide();

        if($('#txtpnr').val() == '' || $('#txtpnr').val().length < 10){

            $(".help-block").show().delay(5000).fadeOut();
            $('#txtpnr').focus();

        }else{

            $('#big-loading').show();
            $("*[name^='flag']").hide();
            $('#pnr-info').hide();

            $.ajax({
                'method':'POST',
                'url':'backEnd/jsonProcess.php',
                'data':'pnrno='+$('#txtpnr').val()+'&RequestType=checkpnr',
                success: function(getPnrStatus){

                    $('#big-loading').hide();

                    if(getPnrStatus == '0'){
                        $('#flag-0').show();
                    }
                    else if(getPnrStatus == '1'){
                        $('#flag-1').show();
                    }
                    else if(getPnrStatus == '2'){
                        $('#flag-2').show();
                    }
                    else if(getPnrStatus == ''){
                        $('#flag-2').show();
                    }else{
                        $('#pnr-info').show();
                        var pnrinfo = getPnrStatus.split('#');

                        $('.pnr').empty().html(pnrinfo[0]);
                        $('.journy').empty().html(pnrinfo[1]);
                        $('.trainname').empty().html(pnrinfo[2]);
                        $('.trainno').empty().html(pnrinfo[3]);
                        $('.class').empty().html(pnrinfo[4]);
                        $('.brdfrom').empty().html(pnrinfo[5]);
                        $('.bkpoint').empty().html(pnrinfo[6]);
                        $('.brdto').empty().html(pnrinfo[7]);
                        $('.chartinfo').empty().html(pnrinfo[8]);
                        $('#passenger-info tbody').empty().html(pnrinfo[9]);
                    }

                }
            });
        }
    });

      

        
        
        
      

    

After adding a value via the virtual keyboard, the button click event does not work. How to solve this? I am using bootstrap 3 css framework.