Question

我正在尝试为按钮实现加载效果，如codepen中所示。

我正在使用bootstrap 4（测试版2）Jquery 3.2.1。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Group View</title>
    <link rel="stylesheet" media="all" href="../css/bootstrap.css" >
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap-bundle.js"></script>
</head>
<body>

  <div>
    <button type="button" class="btn btn-primary btn-lg">Submit Order</button>
  </div>

  <script>
    $(document).ready(function() {
      $('button').data('loading-text', 'loading...');
      $('.btn').on('click', function() {
        var $this = $(this);
        $this.button('loading');
        setTimeout(function() {
          $this.button('reset');
        }, 8000);
      });
    })
  </script>
</body>
</html>

上面的代码没有显示＆＃34; loading ...＆＃34;单击按钮时。

Answer 1

我不确定Bootstrap v4中的.button()方法是否包含您尝试使用的选项。您链接到的Codepen使用Bootstrap v3。

以下是使用Bootstrap 4复制相同行为的方法。

＆＃13;

$(document).ready(function() {
  $('.btn').on('click', function() {
    var $this = $(this);
    var loadingText = '<i class="fa fa-circle-o-notch fa-spin"></i> loading...';
    if ($(this).html() !== loadingText) {
      $this.data('original-text', $(this).html());
      $this.html(loadingText);
    }
    setTimeout(function() {
      $this.html($this.data('original-text'));
    }, 2000);
  });
})

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<div>
  <button type="button" class="btn btn-primary btn-lg">Submit Order</button>
</div>

＆＃13;

Answer 2

此功能自v3.3.5起已弃用，已在v4中删除。 Source

Answer 3

几天前遇到了同样的问题，似乎没有人解决。所以这是我的jQuery插件，似乎在Boostrap 4中提供了相同的行为。

(function($) {
    $.fn.button = function(action) {
        if (action === 'loading' && this.data('loading-text')) {
            this.data('original-text', this.html()).html(this.data('loading-text')).prop('disabled', true);
        }
        if (action === 'reset' && this.data('original-text')) {
            this.html(this.data('original-text')).prop('disabled', false);
        }
    };
}(jQuery));

更多详细信息：How to Continue Using Buttons with “data-loading-text” in Bootstrap 4 with jQuery（我的博客）

Answer 4

我遇到了同样的问题，并尝试了上面Mavelo上载的示例，但它不适用于以下查询：

$('button').button('reset')

可对多个对象进行操作。这是修改后的代码，它支持单按钮查询和多按钮查询：

(function($) {
    $.fn.button = function(action) {
        if (this.length > 0) {
            this.each(function(){
                if (action === 'loading' && $(this).data('loading-text')) {
                    $(this).data('original-text', $(this).html()).html($(this).data('loading-text')).prop('disabled', true);
                } else if (action === 'reset' && $(this).data('original-text')) {
                    $(this).html($(this).data('original-text')).prop('disabled', false);
                }
            });
        }
    };
}(jQuery));

使用带有数据加载文本的bootstrap 4中的jquery显示加载..

4 个答案: