如何使用jquery在DOM之后返回一个按钮

Question

我想在这里问我尝试进行 HTML 操作，当单击按钮时，它将向 ajax 发送数据，在 ajax 给出响应之前，按钮将被禁用，这里的问题是我想恢复按钮到了开头怎么办？ 这是我的 HTML

<button
  type="button"
  href=""
  id="bank"
  query-string="{{$assessment['user_id'].'&type=bank&name=american'}}"
  data-toggle="tooltip"
  data-placement="bottom"
  title=""
  data-original-title="Detail Mutation Bank BCA"
  class="btn btn-soft-dark mt-1 mr-1"
>
  mutation
</button>

<script>
  var bank = $("#bank").attr("query-string");
  var btnText = $(this);
  var btn = $(this);
  $(btn)
    .html(
      `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>`
    )
    .attr("disabled", true);

  $.ajax({
    type: "get",
    url: "{{route('getDescription')}}" + "?id=" + bank,
    dataType: "json",
    success: function(data) {
      console.log(data);
      if (data.status == "error") {
        createAlert(data.message, "danger");
      } else {
        window.open(data.url, "_blank");
      }
    }
    //here i want to restore button
  });
</script>

Answer 1

您应该将之前的 HTML 内容存储到 rootTextOfButton 值，如

var rootTextOfButton = $(this).html();

然后就可以恢复喜欢了

btn.html(rootTextOfButton); //here i want to restore button

此外，您还应该删除 disabled 属性，例如 btn.removeAttr("disabled");

完整代码

var rootTextOfButton = $(this).html();

var  btn = $(this);
        $(btn).html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>`).attr("disabled", true);
    $.ajax({
    type:"get",
    url:"{{route('getDescription')}}"+"?id="+bank,
    dataType:"json",
    success:function(data){
        console.log(data);
            if(data.status=='error'){
                createAlert(data.message, "danger");
            }else{
                window.open(data.url, '_blank');
            }
         btn.html(rootTextOfButton); //here i want to restore button
         btn.removeAttr("disabled");
        }
    });