jquery Bootstrap 4正在加载微调按钮

jslywgbw 于 2022-12-12 发布在 jQuery

关注(0)|答案(5)|浏览(254)

我尝试在按钮中实现bootstrap 4加载微调器，就像Bootstrap微调器一样。
下面是我正在做的代码

我的.html文件

<form class="form-inline" id="topicForm" action="" method="POST">
  <input type="text" id="inputTopic" name="topic" class="form-control mb-2 mr-sm-2" placeholder="Topic of interest" required autofocus/>
  <button type="button" id="btnFetch" class="btn btn-primary mb-2">Submit</button>
</form>

我的.js

$(document).ready(function() {
    $("#btnFetch").click(function() {
      // load data via AJAX
      fetch_data($("#inputTopic").val());
      // disable button
      $(this).prop("disabled", true);
      // add spinner to button
      $(this).html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...`
      );
    });
});

这是工作，除了显示在 Bootstrap 文件的微调不显示。按钮的文字是改变为Loading...的预期。想知道是什么，我没有做的权利，微调内的按钮。

jquery

来源：https://stackoverflow.com/questions/54522830/bootstrap-4-loading-spinner-in-button

5条答案

按热度按时间

k4aesqcs1#

使用4.0时，必须为此代码添加Bootstrap 4.2.1
第一个

赞(0）回复(0）举报 2022-12-12

w80xi6nr2#

这对我很有效，它将原始的text/html作为一个属性存储，并从那里恢复它。

$(document).ready(function() {
        $("#btnFetch").click(function() {
           var $this = $(this);
           
           //Call Button Loading Function
           BtnLoading($this);
    
           //Call Button Reset Function after AJAX or your code execution
           BtnReset($this);
        });
    });
    
    function BtnLoading(elem) {
        $(elem).attr("data-original-text", $(elem).html());
        $(elem).prop("disabled", true);
        $(elem).html('<i class="spinner-border spinner-border-sm"></i> Loading...');
    }
    
    function BtnReset(elem) {
        $(elem).prop("disabled", false);
        $(elem).html($(elem).attr("data-original-text"));
    }

赞(0）回复(0）举报 2022-12-12

dgtucam13#

看起来spinner CSS在加载的CSS库中不存在。请尝试以下代码
在CSS中

@keyframes spinner-border {
      to { transform: rotate(360deg); }
    } 
    .spinner-border{
        display: inline-block;
        width: 2rem;
        height: 2rem;
        vertical-align: text-bottom;
        border: .25em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        -webkit-animation: spinner-border .75s linear infinite;
        animation: spinner-border .75s linear infinite;
    }
    .spinner-border-sm{
        height: 1rem;
        border-width: .2em;
    }

在JS中

$(document).ready(function() {
    $("#btnFetch").click(function() {
      $(this).prop("disabled", true);
      $(this).html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loadingg...`
      );
    });
});

Code Pen

赞(0）回复(0）举报 2022-12-12

col17t5w4#

你能试着加吗我加了它在你的密码本里有效

<link href="https://getbootstrap.com/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

且这

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

赞(0）回复(0）举报 2022-12-12

fnatzsnv5#

修改Vinay的答案在我的情况下工作，我只是存储文本，而不是html，因为我的原始按钮被修改重置。

function btnLoading(elem) {
    $(elem).attr("data-original-text", $(elem).text()); // <-use .text() instead of .html()
    $(elem).prop("disabled", true);
    $(elem).html('<span class="spinner-border spinner-border-sm align-middle" aria-hidden="true" role="status"></span> loading...');
}

function btnReset(elem) {
    $(elem).prop("disabled", false);
    $(elem).text($(elem).attr("data-original-text"));
}

赞(0）回复(0）举报 2022-12-12

我来回答

jquery Bootstrap 4正在加载微调按钮

5条答案

相关问题

热门标签

最新问答