jquery - Bootstrap 4 在按钮中加载微调器
问题描述
我正在尝试在按钮中实现 bootstrap 4 加载微调器,就像在 Bootstrap Spinners中一样。
下面是我在代码中所做的
我的.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...`
);
});
});
除了没有显示引导文档中显示的微调器之外,此方法有效。Loading...
按钮文本按预期更改。想知道我没有对按钮内的微调器做什么。
解决方案
在使用 4.0 时,您必须为此代码添加 Bootstrap 4.2.1
$(document).ready(function() {
$("#btnFetch").click(function() {
// 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...`
);
});
});
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div style="margin:3em;">
<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>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
推荐阅读
- r - 查找数据中的所有循环
- javascript - 从 Node.js 获取 PHP 或 Javascript 响应
- vba - 将项目从个人日历移动到接收并自动接受邀请的团队日历?
- ruby - Mac OS Mojave 上的 Ruby 2.4:找不到图像...与 openssl.bundle 相关
- javascript - 运行玩笑测试时出现jsx意外标识符
- python - 尝试使用 USB 将 Nintendo Switch 与 Raspberry 3b+ 通信
- python-3.x - 替代使用 __file__ 在我的 python 包中找到二进制文件夹
- java - 数组索引越界 - Java 递归方法
- python - 无法在 Mendel LINux 上安装 scipy 模块
- django - Django 1.11 中间件如何正确重定向