javascript - 添加 jquery 键盘后，jquery 按钮单击事件不起作用

Question

我尝试使用 jquery keyboard.js 从文本框中获取用户输入。如果我省略虚拟键盘代码，它可以正常工作。

网址: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 框架。

Answer 1

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

缺少此脚本。

addTyping() 是其中的一部分。