Question

我在这里检查了类似的问题，但似乎没有一个能解决我的问题。

我正在尝试将数据加载文本添加到我的提交按钮，但到目前为止还没有运气。

我正在使用Bootstrap 4！

这是我的HTML：

<button type="submit" id="submit" class="btn btn-primary btn-lg mt-2" data-loading-text="Sending...">Submit message!</button>

这是我尝试的最后一个jquery代码：

$(function() {
$(".btn").click(function(){
    $(this).submit('loading').delay(1000).queue(function() {
        // $(this).button('reset');
    });
});
});

由于

Answer 1

试试这个。

<!DOCTYPE html>
<html>

<head>
    <style></style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script>
        function MyCustomFunction(){
            $("#submit").text("Loading...");
            $(this).submit('loading').delay(1000).queue(function () {
                // $(this).button('reset');
            });
        }
    </script>


</head>

<body>
    <button type="submit" onclick="MyCustomFunction()" id="submit" class="btn btn-primary btn-lg mt-2" data-loading-text="Sending...">Submit message!</button>
</body>

</html>

如果是Submit按钮，唯一可能的方法是在单击时绑定自定义函数并将action属性更改为事件处理程序。

Answer 2

我认为这是获得所需结果的最简单方法：

HTML：

<button type="submit" class="btn btn-primary btn-lg btn-block" data-loading-text="Your order is being processed...">Order now</button>

JAVASCRIPT / JQUERY：

$(".btn").on('click', function () {
  var dataLoadingText = $(this).attr("data-loading-text");
  if (typeof dataLoadingText !== typeof undefined && dataLoadingText !== false) {
    console.log(dataLoadingText);
    $(this).text(dataLoadingText).addClass("disabled");
  }
});

数据加载按钮上的文本

2 个答案: