javascript - Bootstrap的button.js和Turbolinks问题

Question

自定义 CSS 类 .btn-loading 禁用按钮并将其文本设置为加载状态:

$(document).on('click', '.btn-loading', function() {
    var btn = $(this);
    btn.button('loading');

    // Fail-safe for buttons that get stuck in the loading state sometimes.
    setTimeout(function() {
        Rollbar.error("Button stuck");
        btn.button('reset');
    }, 10000);
});

// Be sure to remove any loading state on page refresh
$(document).on('ready page:load', function() {
    $('.btn-loading').button('reset');
});

示例按钮

button type="submit" class="btn btn-primary btn-loading" data-loading-text="Processing..." Continue

按下按钮后，文本将更改为“正在处理...”，并且按钮将被禁用以防止多次提交。

但是，有时在开发和生产中，按钮会卡在加载状态，并且由于某种原因不会导致新页面的提交和/或渲染。 setTimeout 在生产服务器上每天触发多次。我们在持续地产生开发问题方面遇到了困难。它时不时地随机发生。

Rollbar 的统计数据显示，它不是特定于浏览器的，也不是单个按钮+操作导致的。所以原因也不是服务器响应慢。

知道可能是什么原因造成的以及如何解决它吗？

Answer 1

我不久前遇到过类似的问题，并用不同的方法解决了同样的问题。尝试按照以下步骤解决您的问题。

HTML:

将按钮类型从“提交”更改为“按钮”。这将使您能够完全控制执行脚本。

<button type="button" class="btn btn-default" id=”SubmitButton”>Submit</button>

JQUERY:

单击按钮时，您需要禁用该按钮。这将立即阻止用户再次点击。然后您可以将按钮文本更改为“正在处理”。下面的脚本将指导您实现这一目标。

$(function () {

    $('#SubmitButton').click(function (e) {
        e.preventDefault();

        //Disable Button to avoid multiple clicks
        $(this).attr("disabled", true);

       // Change the button text to “Processing”
       $(this).text(‘Processing’);

       // Write Your Validation Scripts
       // If Validation Fails - $(this).text(‘Submit’); $(this).attr("disabled", '');
       // Else Submit Form

       //Submit the Form
       $("#targetForm").submit();

    })
})