Событие нажатия кнопки JQuery не работает после добавления jquery-клавиатуры

Question

Я пытаюсь получить пользовательский ввод из текстового поля с помощью jquery keyboard.js. Если я опускаю код виртуальной клавиатуры, то его работа прекрасна.

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

Вот мое текстовое поле и кнопка:

<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> 

У меня есть включить заголовочный файл:

<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 код для виртуальной клавиатуры:

$('#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(); 

код я использую для кнопки:

$('#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]); 
        } 

       } 
      }); 
     } 
    }); 

После добавления стоимости через виртуальную клавиатуру событие нажатия кнопки не работает. Как это решить? Я использую bootstrap 3 css framework.

Answer 1

<script src="js/jquery.keyboard.extension-typing.js"></script> 

Этот скрипт отсутствует.

addTyping() является его частью.