Bootstrap 4：如何重置按钮加载答案

【问题标题】：Bootstrap 4: how to reset button loading [duplicate]Bootstrap 4：如何重置按钮加载
【发布时间】：2020-09-18 23:07:40
【问题描述】：

我正在使用此代码加载按钮

<script>
        $('#load1').click(function() {
            $('#load1').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
        });
</script>

如何在这段代码中设置超时时间

【问题讨论】：

标签： jquery twitter-bootstrap spinner

【解决方案1】：

您可以使用setTimeout 函数在每个button 被点击的x 秒后隐藏加载和微调器。

为了将return 按钮设置为original 状态。我们需要将点击按钮的 HTML 保存在变量上，然后将 HTML 应用回相关的 clicked 按钮。

还可以使用class 选择器而不是id 来单击按钮，您可以重复使用相同的功能多个loading 消息和spinner 不同的具有相同的类。

使用prop 设置disabled 属性attr 在这种情况下不是理想的，不建议使用

实时工作示例：

$('.load1').click(function() {
  var _this = $(this) //click button
  var existingHTML = _this.html() //store exiting button HTML
  //Add loading message and spinner
  $(_this).html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').prop('disabled', true)

  setTimeout(function() {
    $(_this).html(existingHTML).prop('disabled', false) //show original HTML and enable
  }, 3000) //3 seconds
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<button class="btn btn-success load1">
  Click Success
</button>
<br>
<br>
<button class="btn btn-danger load1">
  Click Danger
</button>

【讨论】：