Bootstrap 4：如何重置按钮加载

问题描述

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

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

如何在此代码中设置setTimeout

解决方法

您可以使用setTimeout函数在每次单击x的{​​{1}}秒后隐藏加载和微调器。

为了使按钮button处于其return状态。我们需要将该单击的按钮的HTML保存在变量上，然后将original重新应用到相关的HTML按钮上。

还可以使用clicked选择器代替class进行按钮单击，以使您可以重复使用相同的功能，其中多个id消息和loading消息具有相同的类。

在这种情况下，使用prop设置spinner属性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
});