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無法正常工作

回答

相關問題