Javascript 如何实现ladda引导按钮加载动画？

以下是github文档：

我试图使我的代码正常工作，但出于某种原因，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>

生成PDF
bind（'button[id=genPDF]'）；
$（'#genPDF'）。单击（函数（）{
//我试过的另一种方法
//拉达。捆绑（这个）；
var str=“tmName=”+$（“#tmName”）.val（）+
“&headingText=“+$（“#headingText”）.val（）；
$.ajax({
url:“testing.php”，
数据：str，
cache:false，
成功：功能（数据）{
//这些代码都不重要，它们都可以正常工作
控制台日志（数据）；
var container=document.getElementById（“pdfContainer”）；
var content=container.innerHTML；
container.innerHTML=内容；
}
});
//如果我把Ladda.stopAll（）放在这里，Ladda甚至不会
//点击后开始旋转。
});

我相信这是你的问题

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

文档：

//单击时自动触发加载动画

bind（'input[type=submit]'）

//同上，但两秒钟后自动停止

bind（'input[type=submit]'，{timeout:2000}）

---

当它说“点击时自动触发加载动画”时，它确实是这样做的。它加载它，这导致它继续运行，因为你从来没有告诉过它停止。

我相信这是你的问题

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

文档：

//单击时自动触发加载动画

bind（'input[type=submit]'）

//同上，但两秒钟后自动停止

bind（'input[type=submit]'，{timeout:2000}）

当它说“点击时自动触发加载动画”时，它确实是这样做的。它加载它，这会导致它继续运行，因为你从来没有告诉过它停止。

使用它，它会工作

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

用这个它就行了

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

---

我很好奇为什么你用

按钮[id=genPDF]

而不是

按钮#genPDF

@amflare我继续用“按钮#genPDF”代替了。但这仍然不能帮助我解决问题。我很好奇为什么你用

按钮[id=genPDF]

而不是

按钮#genPDF

@amflare我继续用“button#genPDF”替换了它。但是这仍然不能帮助我解决这个问题，我试图让它在ajax调用完成后立即停止，而不仅仅是基于超时值。把“Ladda.stopAll（）；”放在任何地方都不能让它“开始”。把

stopAll（）

放在

ajax.success

中。别忘了“Ajax”中的“A”代表“异步”，所以基本上，JS开始同时执行Ajax和文件中的下一个代码，图标旋转的时间大约为2毫秒。我之前尝试过这样做，但现在才意识到我要转换的文件太大了，需要花费很长时间。我回去调整了尺寸比例，现在它工作得很好。谢谢我试图让它在ajax调用完成后立即停止，而不仅仅是基于超时值。把“Ladda.stopAll（）；”放在任何地方都不能让它“开始”。把

stopAll（）

放在

ajax.success

中。别忘了“Ajax”中的“A”代表“异步”，所以基本上，JS开始同时执行Ajax和文件中的下一个代码，图标旋转的时间大约为2毫秒。我之前尝试过这样做，但现在才意识到我要转换的文件太大了，需要花费很长时间。我回去调整了尺寸比例，现在它工作得很好。谢谢我建议添加

e.preventDefault（）之前
var l=Ladda.create（此）我建议添加
e.preventDefault（）之前
var l=Ladda.create（此）