Bootstrap4：如何重置按钮加载

Question

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

<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>

如何在此代码中设置超时

Answer 1

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

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

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

使用prop设置disabled属性attr在这种情况下不是理想的不rec-emended被使用

实时工作示例：

$('.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>

Bootstrap4：如何重置按钮加载

Bootstrap 4: how to reset button loading

jquery

spinner

twitter-bootstrap