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

Posted 2023-02-25

【中文标题】添加jquery键盘后，jquery按钮单击事件不起作用

【英文标题】：Jquery button click event not working after adding jquery keyboard

【发布时间】：2015-04-24 08:09:35

【问题描述】：

我尝试使用 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 框架。

【问题讨论】：

Javascript 控制台有错误吗？我认为虚拟键盘不太可能会更改无关输入元素上的任何内容，因此最可能的问题是您在添加对.keyboard 的调用时出现语法错误。

你能做一个 jsfiddle 来演示这个问题吗？

console : Uncaught TypeError: $(...).keyboard(...).addTyping is not a function

这里是另一个项目链接：jqueryscript.net/other/…

缺少此脚本。 addTyping() 是其中的一部分。

【参考方案1】：

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

此脚本丢失。

addTyping() 是其中的一部分。