Javascript 带引导的onClick不起作用_Javascript_Jquery_Twitter Bootstrap

Javascript 带引导的onClick不起作用

javascript jquery twitter-bootstrap

Javascript 带引导的onClick不起作用,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,我想在点击按钮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"> </he

我想在点击按钮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

多谢各位

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

页脚

像

将ready函数添加到脚本中：

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

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

希望这有帮助。

我认为这就是问题所在。您正在使用btn info CSS类查找元素

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

下面的代码在我迭代$'.btn info'时起作用，这样类的每个按钮都有一个点击事件

/*$'.btn info'。单击函数E{ e、防止违约； $this.addClass'active'； }*/ $'.btn info'.eachfunction索引{ $this.clickfunction{ e、防止违约； $this.addClass'active'；已添加alertclass } }; 选择你想交易的东西

检查浏览器控制台中是否有任何错误消息。正常！但现在我遇到了一个问题，即每个其他html页面上有该页脚的按钮都使用该脚本。实际上应该使用href的按钮在引用其他页面时不再起作用，它们只是处于活动状态。那么，我如何才能使您的代码只在特定的html文件中使用呢？

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

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

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