按钮上的数据加载文本答案

【问题标题】：Data loading text on button按钮上的数据加载文本
【发布时间】：2017-05-06 23:12:59
【问题描述】：

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

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

我正在使用 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');
    });
});
});

谢谢

【问题讨论】：

如果按钮是提交类型并且在表单内，一旦你点击它，表单就已经提交了。您只需要使用 .text('text') 更改内部文本
此功能已在 Bootstrap 4 中删除。
在stackoverflow.com/questions/48240011/…stackoverflow.com/questions/48240011/…发布相同问题的插入式解决方案

标签： javascript jquery twitter-bootstrap

【解决方案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>

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

【讨论】：

如果我将类型更改为按钮，我可以看到加载文本，但是我的表单没有发送。
@PapT 在提交按钮的情况下，唯一可能的方法是在单击时绑定自定义函数并将操作属性更改为事件处理程序。
仍然没有发送
对不起，它现在正在发送消息。但在消息发送后，“正在加载...”文本仍保留在按钮上。
您需要在收到 $("#submit").text("Submit message!"); 的响应时手动更改它；

【解决方案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");
  }
});

【讨论】：