onClick with Bootstrap无法正常工作

我想通过点击一个按钮（Bootstrap 3.3.7.1）来实现，它被标记为活动。为此，我实际上只是复制粘贴我在这里找到的代码在stackoverflow上。但是，当我测试它时，按钮不显示任何行为。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>

非常感谢您！

来源

2017-08-09 AnnaKlein

检查浏览器控制台中是否有任何错误消息。 –

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

来源

2017-08-09 15:30:35 brk

工作！但是现在我遇到了问题，即每个带有该页脚的其他html页面上的每个按钮都使用该脚本。而实际上应该使用href的按钮不再在引用另一个页面，它们只是活动的。那么我怎么才能让你的代码在特定的html文件中只能使用？ – AnnaKlein

就绪功能添加到您的脚本加载后jquery：

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

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

希望这有助于。

来源

2017-08-09 15:31:56

我觉得这个问题。您正在寻找具有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>

我希望这可以帮助。谢谢！！

来源

2017-08-09 15:42:54

onClick with Bootstrap无法正常工作

回答

相关问题