onClick mit Bootstrap funktioniert nicht

Ich möchte erreichen, dass nach einem Klick auf eine Schaltfläche (Bootstrap 3.3.7.1) wird es als aktiv markiert. Dafür kopiere ich einfach einen Code, den ich hier auf stackoverflow gefunden habe. Aber trotzdem, wenn ich es teste, zeigt der Button kein Verhalten.onClick mit Bootstrap funktioniert nicht

Hier ist mein Code:

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

Und hier die 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>

Vielen Dank!

Quelle

2017-08-09 AnnaKlein

Überprüfen Sie, ob in der Browserkonsole eine Fehlermeldung angezeigt wird. –

Platz click Event-Handler in der Fußzeile, weil Sie jquery nach dem Laden DOM

in Fußzeile

wie

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

Quelle

2017-08-09 15:30:35 brk

das funktioniert! Aber jetzt habe ich das Problem, dass jede Schaltfläche auf jeder anderen HTML-Seite mit dieser Fußzeile dieses Skript verwendet. Und Tasten, die eigentlich href verwenden sollten, funktionieren nicht mehr auf einer anderen Seite, sie sind nur aktiv. Wie kann ich Ihren Code nur in dieser speziellen HTML-Datei verwenden? – AnnaKlein

Fügen Sie die Ready-Funktion zu Ihrem Skript geladen werden:

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

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

Hoffe, das hilft.

Quelle

2017-08-09 15:31:56

Ich denke, das ist das Problem. Sie finden das Element mit btn-info CSS-Klasse.

Da es zwei Elemente mit demselben CSS-Klassennamen gibt, kann das On-Click-Ereignis nicht auf jedes Element angewendet werden.

So funktioniert Code wie ich die $('.btn-info') iterieren, so dass jede Schaltfläche mit der Klasse On-Click-Ereignis hat.

/*$('.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>

Ich hoffe, dass dies helfen könnte. Vielen Dank!!

Quelle

2017-08-09 15:42:54

onClick mit Bootstrap funktioniert nicht

Antwort

Verwandte Themen