Question

我有以下HTML应用程序：

<html>

<head>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

    <link rel=stylesheet type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.css">

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0-RC3/js/bootstrap-datepicker.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>

    <style>

        h1 {
            font-size: 2em;
        }

        .jumbotron {
            background-color: #3cba54;
            color: white;
            border-radius: 0px;
        }

        .dates {
            margin: 20px auto;
            width: 500px;
        }

        @media(max-width: 900px) {
            .dates {
                width: 80%;
            }
            input::-webkit-input-placeholder {
                line-height: 3;
            }
        }

        .label {
            padding-right: 10px;
            width: 50px;
            font-weight: bold;
            color: #383b3d;
            font-size: 14px;
        }

        .icon {
            font-size: 2em !important;
        }

        input {
            border-radius: 10px !important;
            border-style: solid;
        }



        body {
            color: #383b3d;
        }



        .submit {
            width: 100%;
            margin: 10px auto;
        }

        #load:hover {
            cursor: pointer;
        }



    </style>

</head>

<body>

    <div class="jumbotron">

        <h1 class="text-center">Business trip details</h1>

    </div>

    <div class="container">

        <form id="specials">

            <!-- =============================================================================================== Name of offer or amendment ================================================================== -->

            <div class="form-group">

                <label class="label1" for="title"><em>Destinations visited</em></label>

                <input id="title" type="text" class="form-control" placeholder="e.g. Paris, Lille" name="offerName">

            </div>

            <hr>

            <!--=================================================== Date picker =========================================================================            -->

            <div class="label1 text-center"><em>Please enter the start and end date of your business trip</em></div>

            <div class="container dates">
                <div class="input-group date">
                    <i class="far fa-calendar-alt label icon"></i>

                    <input type="text" class="form-control datepicker" id="datepickerFrom" placeholder="Start date" name="firstDate">
                </div>
            </div>

            <div class="container dates">
                <div class="input-group date">
                    <i class="far fa-calendar-alt label icon"></i>

                    <input type="text" class="form-control datepicker" id="datepickerTo" placeholder="End date" name="lastDate">
                </div>
            </div>

            <hr>


    <button type="submit" class="btn btn-success btn-lg submit" id="load" data-loading-text="<i class='fa fa-spinner fa-spin'></i> Sending">Submit</button>


    </form>

    </div>

</body>

<!--==============================================================================================================================-->

<script>

    $(".datepicker").datepicker({
        format: 'dd-mm-yyyy'
    });

    // Info for saving email


    $('form').submit(function(e) {

        e.preventDefault();

        google.script.run
            .withSuccessHandler(function(result) {
                google.script.host.close()
            })
            .saveAsSpreadsheet(e.currentTarget);
    }); 


    $('.btn').on('click', function() {
       var $this = $(this);
            $this.button('loading');
            setTimeout(function() {
                $this.button('reset');
            }, 15000)
        });

</script>

</html>

我正在尝试在脚本运行时单击“提交”按钮来创建动画加载效果。我在其他应用程序上使用了相同的代码，它始终可以正常工作，但是由于某种原因，我无法使其正常运行。这显然是关键的代码段：

$('.btn').on('click', function() {
   var $this = $(this);
        $this.button('loading');
        setTimeout(function() {
            $this.button('reset');
        }, 15000)
    });

我确定我在这里做错了非常明显的事情-我无法弄清楚，因为它似乎与我在其他地方工作的代码相同。

Answer 1

首先，我得到jQuery加载错误。在href中缺少https：。

这是您的答案：Loading state button in Bootstrap 3

从v3.5.5开始不推荐使用此方法，在v4中将其删除。而您正在使用v.4.1.3。

Answer 2

可以做到，您只是没有采取正确的方法，必须删除"cucumber": "rimraf cucumber/build && tsc -p cucumber && webdriver-manager update && protractor cucumber/build/protractor.conf.js"，我在下面调整了您的脚本：

我进行了以下更改：

setTimeout-表单将等待被按钮触发
在$('form').on("submit")中我添加了withSuccessHandler-默认文本
您将在.btn点击处理程序中找到内容$('.btn').html('Submit')和loading
您可以安全地删除我创建的$("form").trigger('submit')对象
```
google
```

单击提交按钮时动画的加载圆圈

2 个答案: