jQueryクリックイベントでの不思議

Question

状況と問題点

table要素の各tdのセル内に表示要素と非表示要素の2つをdivで囲って置いています。
各行の最後にあるボタンをクリックしたら、行ごとに表示・非表示を切り替えたいので
ボタンのクリックで以下のページようにしました。jQueryを使っています。
しかしボタンをクリックしても一瞬だけ切り替わって、すぐに元にもどってしまいます
切り替わったまま保持したいのですがどうすればいいでしょうか？

稼働中のページ

実際のページ

コード

以下のHTMLは最小限に簡略化したもので、実際には複数列のものが複数行あります。

    .mod {
      display: none;
    }

   <tr>
     <td>2021-09-19</td>
     <td>
       <div class="disp" data-key="2021-09-19">●</div>
       <div class="mod" data-key="2021-09-19"><input type="checkbox" name="eachday09" checked /></div>
     </td>
     <td>
       <div class="disp" data-key="2021-09-19">●</div>
       <div class="mod" data-key="2021-09-19"><input type="checkbox" name="eachday10" checked /></div>
     </td>
     <td>
       <div class="disp"><a href="" class="changeBtn"><input type="button" value="変更" data-key="2021-09-19"></div>
        <div class="mod"><a href="" class="registerBtn"><input type="button" value="登録"></div>
     </td>
   </tr>

    $('.changeBtn').click(function(){
      let key = $("input",this).data('key');
      $('.disp'+'[data-key="'+key+'"]').css('display','none');
      $('.mod'+'[data-key="'+key+'"]').css('display','block');
    })

どの行のchangeBtnがクリックされたか識別する必要があったので
データ属性を取得し、その属性値を持った要素を対象に
表示・非表示を切り替えようとしました。

単純なパターン

これをやる前の実験としてやった以下のような単純なセレクタでは
すぐにもとに戻ることはなく切り替わったままになります
単純なのでどの行とか識別できず全部が対象になっていますが。

    <table>
      <tr>
        <td><div class="disp">●</div><div class="mod"><label><input type="checkbox" name="eachday9" /></label></div></td>
        <td><div class="disp">-</div><div class="mod"><label><input type="checkbox" name="eachday10" /></label></div></td>
        <td><div class="disp"><input type="button" value="変更" class="changeBtn"></div><div class="mod"><input type="button" value="登録" id="changeBtn"></div></td>
      </tr>
      <tr>
        <td><div class="disp">●</div><div class="mod"><label><input type="checkbox" name="eachday9" /></label></div></td>
        <td><div class="disp">-</div><div class="mod"><label><input type="checkbox" name="eachday10" /></label></div></td>
        <td><div class="disp"><input type="button" value="変更" class="changeBtn"></div><div class="mod"><input type="button" value="登録" id="changeBtn"></div></td>
      </tr>
    </table>

    $('.changeBtn').click(function(){
      $('.mod').css('display','block');
      $('.disp').css('display','none');
    })

Answer 1

ボタンをクリックしても一瞬だけ切り替わって、すぐに元にもどってしまいます

ボタンをクリックして表示内容が変わったあと、自分自身のページへ移動することでもとの表示に戻っていることが原因です。aタグのhref属性に書かないとそれは自分自身のページへのリンクになります。

aタグを消してセレクタを見直すか、<a href="javascript:void(0);">のようにクリックしても何も起きないように明示的に指定しましょう。

Comments

[Fujiman]

早速ありがとうございます。そうなんですか。あまりに速いのでリロードになってるとは思いませんでした！