如何实现 ladda-bootstrap 按钮加载动画

Question

这是 github 文档： https://github.com/msurguy/ladda-bootstrap

我正在尝试让我的代码工作，但由于某种原因，ladda 不会停止旋转（按钮永远不会再次启用），即使我在 AJAX 调用后放置"Ladda.stopAll（）;"。这是我的代码：

<button type="button" class="btn btn-lg btn-success ladda-button" data-style="expand-left" id="genPDF"><span class="ladda-label">Generate PDF</span></button>
<script>
    Ladda.bind('button[id=genPDF]');
    $('#genPDF').click(function () {
        //Another approach I tried
        //Ladda.bind(this);
        var str = "tmName=" + $("#tmName").val() +
            "&headingText=" + $("#headingText").val();
        $.ajax({
            url: "testing.php",
            data: str,
            cache: false,
            success: function (data) {
                //None of this code matters, it all works fine
                console.log(data);
                var container = document.getElementById("pdfContainer");
                var content = container.innerHTML;
                container.innerHTML = content;
            }
        });
        //If I placed Ladda.stopAll(); here, the ladda wouldn't even
        //START spinning upon being clicked on.
    });
</script>

Answer 1

使用 这 它有效

$('#yourladda_btn').click(function(){
    var l = Ladda.create(this);
    l.start();
    $.ajax({
        url: 'test.php',
        type: "post",
        data: {"yourdata":"test"},
        success: function(){
        }
    }).always(
            function() {
                l.stop();
            }
    );
});

Answer 2

我相信

这是你的问题

Ladda.bind('button[id=genPDF]');

文档：

点击自动触发加载动画

Ladda.bind（'input[type=submit]' ）;

与上述相同，但两秒后自动停止

Ladda.bind（ 'input[type=submit]'， { timeout： 2000 } ）;

当它说"单击时自动触发加载动画"时，它确实做到了。它加载它，这导致它继续运行，因为你从来没有告诉它停止。