jQueryのtoggleClassでクリックしたボタンにクラスを付与したい。

前提・実現したいこと

jQueryのtoggleClassでクリックしたボタンにクラスを付与したいです。

発生している問題・エラーメッセージ

ボタンをクリックしても、クラスが付与されません。

$(".btn").click(function() {
$(this).toggleClass("btn-active");
});
としているのですが、concole.logを$(".btn")～内に記述すると、
一瞬だけ表示されてすぐに消えてしまいます。

該当のソースコード

HTML
1<div class="pager">
2    <a href="?p=5" class="btn btn-prev">Prev</a>
3    <a href="?p=3" class="btn btn-default">3</a>
4    <a href="?p=4" class="btn btn-default">4</a>
5    <a href="?p=5" class="btn btn-default">5</a>
6    <a href="?p=6" class="btn btn-default">6</a>
7    <a href="?p=7" class="btn btn-next">Next</a>
8</div>

jQuery
1$(function() {
2    $(".btn").click(function() {
3        $(this).toggleClass("btn-active");
4    });
5});

試したこと

いつもこの方法でクラスを付与できていたので、
今回付与できていなくて、困っています...

補足情報（FW/ツールのバージョンなど）

jQueryは最新版（jQuery 3.4.1）を使用しています。

hentaiman

2019/07/16 23:56

最新じゃないバージョンで動作確認して動く用なら最新バージョンだけのバグって事で前のバージョン使えばいいのでは

行動規範の内容に同意します

回答2件

同じく、ページが遷移しているからでしょうね、
自分だったら、最初からクラスをつけておきます。

投稿2019/07/17 04:28

icegreen

総合スコア96

minyouyuu

2019/07/19 21:33

確かに、ページャーの部分なので、画面遷移してました。気づかなかったです。ありがとうございました。

行動規範の内容に同意します

ベストアンサー

ページが遷移しているからですねpageshowを使うとよいでしょう

javascript
1<style>
2.btn-active{color:red}
3</style>
4<script>
5$(function(){
6  $(window).on('pageshow',function(e) {
7    $('a').filter(function(){
8      return $(this).attr('href')==location.search;
9    }).toggleClass("btn-active");
10  });
11});
12</script>
13<div class="pager">
14    <a href="?p=5" class="btn btn-prev">Prev</a>
15    <a href="?p=3" class="btn btn-default">3</a>
16    <a href="?p=4" class="btn btn-default">4</a>
17    <a href="?p=5" class="btn btn-default">5</a>
18    <a href="?p=6" class="btn btn-default">6</a>
19    <a href="?p=7" class="btn btn-next">Next</a>
20</div>