我正在尝试实现按钮的加载效果，如 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>
上面的代码在点击按钮时不显示“loading...”。
我不确定 Bootstrap v4 中的 .button() 方法是否有您尝试使用的选项。您链接到的 Codepen 使用 Bootstrap v3。
以下是如何使用 Bootstrap 4 复制相同的行为。
$(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);
});
})
<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>