如何實現ladda-bootstrap按鈕加載動畫？

Question

這是github文檔： https : //github.com/msurguy/ladda-bootstrap

我試圖使我的代碼正常工作，但是由於某種原因，即使沒有放置“ Ladda.stopAll（）;”，該ladda也不會停止旋轉（按鈕再也不會啟用）。 在AJAX調用之后。 這是我的代碼：

<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

我相信這是你的問題

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

文檔：

//點擊時自動觸發加載動畫

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

//與上述相同，但兩秒鍾后自動停止

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

當它說“點擊時自動觸發加載動畫”時，它實際上就是這樣做的。 它會加載它，導致它一直運行，因為您從未告訴過它要停止。

Answer 2

使用它工作

$('#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();
            }
    );
});