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>

そしてここ

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

はどうもありがとうございましtemplate.html：

は、ここに私のコードです！フッターに

出典

2017-08-09 AnnaKlein

ブラウザコンソールにエラーメッセージがないか確認してください。 –

置きclickイベントハンドラあなたのスクリプトに準備ができて機能を追加

<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

ようフッターにDOM

ロードした後jqueryをロードしているので：

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

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

これが役に立ちます。

出典

2017-08-09 15:31:56

私はこれが問題だと思います。あなたはbtn-info CSSクラスで要素を探しています。

同じCSSクラス名を持つ2つの要素があるので、各要素に上のクリックイベントを適用するために失敗しています。

以下のコードは、$('.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が動作していません

答えて

関連する問題