Question

我希望在点击一个按钮（Bootstrap 3.3.7.1）后实现它，它被标记为活动状态。为此我实际上只是复制粘贴我在stackoverflow上找到的代码。但是，当我测试时，按钮没有显示任何行为。

这是我的代码：

<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>

非常感谢！

Answer 1

在页脚中放置click事件处理程序，因为您在加载DOM后加载jquery

页脚

像

<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>

Answer 2

将ready函数添加到脚本中：

<script>
    $(function(){
        $('.btn-info').click(function(e) {
            e.preventDefault();

            $(this).addClass('active');
        });
    });
</script>

希望这有帮助。

Answer 3

我认为这个问题。您正在找到具有btn-info CSS Class的元素。

由于有两个元素具有相同的CSS类名，因此无法将on-click事件应用于每个元素。

所以下面的代码就像我在迭代$('.btn-info')一样，以便每个按钮都有点击事件。

＆＃13;

/*$('.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")
    })
});

＆＃13;

<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>

＆＃13;

我希望这可能会有所帮助。谢谢!!

onClick与Bootstrap无法正常工作

3 个答案: