onClick with Bootstrap无法正常工作
问题描述:
我想通过点击一个按钮(Bootstrap 3.3.7.1)来实现,它被标记为活动。为此,我实际上只是复制粘贴我在这里找到的代码在*上。但是,当我测试它时,按钮不显示任何行为。onClick with Bootstrap无法正常工作
这里是我的代码:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:replace="template :: head">
</head>
<body>
<div class="container">
<form method="post" action="specifyDetails">
<h2>Chose what you want to trade</h2>
<label>
<select th:name="Products" class="selectpicker" multiple="multiple">
<!--/*@thymesVar id="productList" type="java.util.List"*/-->
<option th:each="product : ${productList}"><a th:text="${product}"></a></option>
</select>
</label>
<button th:type="submit" class="btn btn-info">Send</button>
</form>
<form><a th:href="'orderview/'" href="#" class="btn btn-default btn-sm" role="button">Orderview only</a>
</form>
<input type="button" class="btn btn-info" value="Input Button"/>
<script>$('.btn-info').click(function(e) {
e.preventDefault();
$(this).addClass('active');
})</script>
</div>
<div th:replace="template :: footer"></div>
</body>
</html>
而这里template.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
<meta charset="UTF-8"/>
<!--/*@thymesVar id="title" type="String"*/-->
<title th:text="${title}">Library trader</title>
</head>
<footer th:fragment="footer">
<script th:src="@{/webjars/jquery/3.2.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
<script th:src="@{/webjars/bootstrap-select/1.12.2/js/bootstrap-select.min.js}"></script>
<link th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap-theme.min.css}" rel="stylesheet"/>
<link th:href="@{/webjars/bootstrap-select/1.12.2/css/bootstrap-select.min.css}" rel="stylesheet"/>
</footer>
</html>
非常感谢您!
答
广场click
事件处理程序在页脚,因为你是在页脚加载DOM
像
<footer th:fragment="footer">
<script th:src="@{/webjars/jquery/3.2.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
<script th:src="@{/webjars/bootstrap-select/1.12.2/js/bootstrap-select.min.js}"></script>
<script>$('.btn-info').click(function(e) {
e.preventDefault();
$(this).addClass('active');
})</script>
//rest of the code
</footer>
+0
工作!但是现在我遇到了问题,即每个带有该页脚的其他html页面上的每个按钮都使用该脚本。而实际上应该使用href的按钮不再在引用另一个页面,它们只是活动的。那么我怎么才能让你的代码在特定的html文件中只能使用? – AnnaKlein
答
就绪功能添加到您的脚本加载后jquery
:
<script>
$(function(){
$('.btn-info').click(function(e) {
e.preventDefault();
$(this).addClass('active');
});
});
</script>
希望这有助于。
答
我觉得这个问题。您正在寻找具有btn-info
CSS Class的元素。
由于存在两个具有相同CSS类名的元素,因此无法对每个元素应用点击事件。
所以下面的代码工作,我迭代$('.btn-info')
,使每个按钮与类具有点击事件。
/*$('.btn-info').click(function(e) {
e.preventDefault();
$(this).addClass('active');
})*/
$('.btn-info').each(function(index) {
$(this).click(function(e) {
e.preventDefault();
$(this).addClass('active');
alert("class Added")
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:replace="template :: head">
</head>
<body>
<div class="container">
<form method="post" action="specifyDetails">
<h2>Chose what you want to trade</h2>
<label>
<select th:name="Products" class="selectpicker" multiple="multiple">
<!--/*@thymesVar id="productList" type="java.util.List"*/-->
<option th:each="product : ${productList}"><a th:text="${product}"></a></option>
</select>
</label>
<button th:type="submit" class="btn btn-info">Send</button>
</form>
<form><a th:href="'orderview/'" href="#" class="btn btn-default btn-sm" role="button">Orderview only</a>
</form>
<input type="button" class="btn btn-info" value="Input Button"/>
</div>
<div th:replace="template :: footer"></div>
</body>
</html>
我希望这可以帮助。谢谢!!
检查浏览器控制台中是否有任何错误消息。 –