aタグクリック時のページ前遷移イベントが反映されない

Question

wordpressサイトで、aタグをクリックした際に、テキスト横につけたチャックボックスにチェックが入るようにしたいです。

特に何かを送信するわけではなく、単純にクリックした時の反応が欲しいだけなので、
チェックボックスとチェックはspanタグを整形して作っています。

チェックは普段opcity:0にしておいて、aタグクリック時のイベントとして、opacity:1になるようにしています。

コードをテストしたところ、wordpressのカスタマイザー画面では普通に動作するのですが、
通常の画面では無反応です。

ページ遷移を送られて、先にイベント処理をするようにしたのですが、
うまく反応してくれません。

<div class="list">
　<span class="box"></span><!--ボックス-->
<span class="check"></span><!--チェック-->
  <a class="btn" href="#">ここをクリック</a>
</div>

jQuery(function() {
    //aタグを押したら発火
    jQuery('a.btn').on('click', function(e){
      //クリック時の挙動を停止
      e.preventDefault();
      //href属性の属性情報を取得
      url = jQuery(this).attr('href');
      if (url !== '') {
        //checkクラスのcssを操作
        jQuery(this).prev('.check').css('opacity', '1');
        //setTimeOutを用いて500s後にurl遷移を実行
        setTimeout(function(){
          window.location = url;
        }, 500);
      }
      return false;
    });
  });

カスタマイザー画面では反応するので、コード自体が大きく間違っているわけではないと思ったのですが、
なぜ普通に画面になると反応しないのかがわからず困っています。
他にbuttonタグなど検討したのですが、href属性で直接phpを入れられないので、
やはりaタグでなんとかしないといけない状況です。

どなたかお知恵をお貸しいただけないでしょうか。
よろしくお願いいたします。

Comments

[KazuhiroHatano]

ブラウザのコンソールを見たら
jQuery is undefined　とか言われてたりしませんか？

[pikarun]

コメントありがとうございます！
jQuery is undefinedとは出ていないのですが、
他の人間が書いたscriptがいくつかエラーにはなっています。
もしかしてここで止まっているのか？とも思ったのですが、
勝手に変更できない状況なのです。。

Answer 1

<script>
$(function(){
  $('.check').css('opacity',0);
  $('a.btn').on('click',function(e){
    var self=$(this);
    e.preventDefault();
    $(this).prevAll('.check').css('opacity',1).delay(500).queue(function(){
      location.href=self.attr('href');
      $(this).dequeue();
    });
  });
});
</script>
<div class="list">
<span class="box"></span>
<span class="check">chk</span>
<a class="btn" href="#">ここをクリック</a>
</div>

Comments

[yambejp]

boxとかcheckとか空白文字ならそもそもが透明を不透明にしても
なにもかわらないでしょう？

[pikarun]

ご教示いただいてありがとうございます。

確かにおっしゃる通りですね。
今までspanタグをcssで整形してチェックボックス風にしていたものをHTMLに変えて、
ご教示いただいたコードでやってみました。

すると、今までと違って、チェックしたところは反応してチェックが入りました！

しかし、他のページに行って帰ってくると、全部で５つあるチェックボックス全てに
チェックが入った状態になっています。

再読み込みすれば消えるのですが、
教えていただいてばかりで恐縮ですが、
aタグをクリックする→チェックが入る→他のページへ移動する→元のページへ戻るとチェックは入っていない、
という状態にするにはどうしたら良いか教えていただけないでしょうか。

formタグにしてリセットさせる方が良いでしょうか

[yambejp]

＞ 他のページへ移動する→元のページへ戻るとチェックは入っていない、

あまりよい仕様とは言い難いですが、どうしてもというなら
checkクラスの設定をwindowのpageshowイベントに紐付けてください
$(window).on('pageshow',function(){
$('.check').css('opacity',0);
});

[pikarun]

ありがとうございます！やってみます。