javascript - Bootstrap button.js和Turbolinks问题

自定义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的统计数据表明，它不是浏览器特定的，也不是单个按钮+动作引起的。因此，原因也不是服务器响应缓慢。

知道是什么原因造成的，以及如何解决？

最佳答案

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

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();

    })
})