JavaScript / Jquery の addEventListener が 2回目押下後以降効かなくなる。

Question

実現したいこと

ナビボタンの実装で、選択したらその部分のセクションまでスクロールさせたいです。
以下のバグが起こっています。

1 回目のボタン押下：全て正常動作（スクロールする。）
2 回目のボタン押下（list-section2 以外のボタンを 2 回押下）：正常動作（スクロールする。）
2 回目のボタン押下（list-section2 を 1 度押下し他のボタンを押下）：list-section2 が 1度正常動作（スクロール）をした後に list-section2 含めボタン押下しても反応しなくなる。

前提

• 1 回目動作時点では問題ないのですが、 list-section2 を一度押下したあとの動作は全て、 addeventlistener の onclick が効かなくなっています。

• list-section2 を押した後に、list-section3 を押下した際に、list-section3 の中の console.log が表示されなくなります。

• list-section2 を 2 回押下した際に、list-section2 のconsole.log が全て表示されません。

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

エラーが表示されるようなことはありませんでした。

該当のソースコード

$(window).on('load', function(){

  $('.list-section1').on('click', function() {
    // 該当のポイントまで遷移させる
    scrollTo(0, 50);
    // 該当のナビの下線を付ける
    $('li').css('border-bottom', 'white solid 2px');
    // 該当のナビの以降の下線を外す
    $('li').each(function(idx, val) {
      if(idx > 0) {
        val.style.border = 'none';
      }
    });

    console.log(window.pageYOffset);

  });

  $('.list-section2').on('click', function() {
    console.log('2-1');
    scrollTo(0, 750);
    $('li').css('border-bottom', 'white solid 2px');
    $('li').each(function(idx, val) {
      if(idx > 1) {
        val.style.border = 'none';
      }
    });
    console.log('2-2');

    console.log(window.pageYOffset);
    console.log('2-3');

  });

  $('.list-section3').on('click', function() {
    console.log('3-1');

    scrollTo(0, 1300);
    console.log('3-2');

    $('li').css('border-bottom', 'white solid 2px');
    $('li').each(function(idx, val) {
      if(idx > 2) {
        val.style.border = 'none';
      }
    });
    console.log('3-3');

    console.log(window.pageYOffset);

  });

  $('.list-section4').on('click', function() {
    scrollTo(0, 1960);
    $('li').css('border-bottom', 'white solid 2px');
    $('li').each(function(idx, val) {
      if(idx > 3) {
        val.style.border = 'none';
      }
    });

    console.log(window.pageYOffset);

  });

  $('.list-section5').on('click', function() {
    scrollTo(0, 2800);
    $('li').css('border-bottom', 'white solid 2px');
    $('li').each(function(idx, val) {
      if(idx > 4) {
        val.style.border = 'none';
      }
    });

    console.log(window.pageYOffset);

  });
});

  <nav>
    <ul>
      <li class="list-section1">ホーム</li>
      <li class="list-section2">自己紹介</li>
      <li class="list-section3">経験言語</li>
      <li class="list-section4">Works</li>
      <li class="list-section5">Contact</li>
    </ul>
  </nav>

試したこと

$('.list-section2').on('click', function() {
}
の処理の中身全て（JavaScript 20 ~ 31 行目）をコメントアウトしたところ、list-section2 を押下後も、他のボタンは反応するようになりました。

Comments

[退会済みユーザー]

ブラウザのディベロッパーツールを使ってデバッグしてみましたか？　ブレークポイントを適当な場所に置いてステップ実行して期待通りのステップで進むか、変数の中身は期待通りかとか。

[tetejiro]

>ブレークポイントを適当な場所に置いてステップ実行して期待通りのステップで進むか、変数の中身は期待通りかとか。

仕込んでいる console.log は該当しますでしょうか？
すみませんが、他に仕込むものが思いつかず、具体的な例などを教えていただけますと嬉しいです。
お手数をおかけしますが、どうぞよろしくお願いします。

Answer 1

もう少し共通化する意識を持ったほうが良いと思います

<script>
$(function(){
  var list_y=[100,200,300,400,500];
  $('.list-section').on('click', function() {
    var idx=$('.list-section').index($(this));
    scrollTo(0, list_y[idx]);
    $('.list-section').css({'border-bottom':'solid 0px'});
    $(this).css({'border-bottom':'solid 2px'});
  });
});
</script>
<nav>
    <ul>
      <li class="list-section">ホーム</li>
      <li class="list-section">自己紹介</li>
      <li class="list-section">経験言語</li>
      <li class="list-section">Works</li>
      <li class="list-section">Contact</li>
    </ul>
  </nav>
<div>

※実際にはスクロール位置は数値ではなく移動したいエリアを指定するべきです

Comments

[tetejiro]

ご回答いただき誠にありがとうございます。

＞共通化させる意識を持つべき
ご指摘いただきありがとうございます。
おっしゃる通りですね。

いただきましたコードで試してみました。
しかし、動作が変わりがなく未だバグが解消されていない状態です。

私の方でも、コードを以下に変えてみました。
結果は同様で、バグがそのまま出現してしまっております。
（自己紹介ボタンを押下後、ボタンが効かなくなる。）

もし他にお心当たりがございましたら、ご回答いただけますと
大変嬉しいです。どうぞよろしくお願いします。

$(window).on('load', function(){
let list_y = [50, 750, 1300, 1960, 2800];
$.each($('.list-section'), (idx) => {
document.querySelectorAll('.list-section')[idx].addEventListener('click', function() { //$('.list-section').on('click' ~ だとなぜかエラー
scrollTo(0, list_y[idx]);
});
});
});

※スクロール位置のエリアでの指定はこちらのバグ修正後対応したいと思います。
ご指摘ありがとうございます。
また、下線処理も同様にいったん後回しにしたいと思います。

Answer 2

すみませんが、こちら私の CSS の記載が誤っていたためでした。

※バグの該当部分のみ、ナビ部分にpadding がかぶってしまっているため、
ボタンが押下できなくなっていました。