タブ切り替え時に、特定のタブだけonClickが反応しない(CodePenにソースあります)

Question

###前提・実現したいこと

下記ソースにて、タブ切り替え時に特定のタブだけOnClickが反応しません(330行目)
https://codepen.io/ksyunnnn/pen/RgNrqb

jQueryでDOMを操作しHTMLを動的に変化させているので、その中に原因があるのでは、、と考えているのですが
原因の究明に至らず困惑しています。

###該当のソースコード

// タブ切り替え
$('#tabMonth > ul li').on('click', function() {
  $(document.body).on('click', '#tabMonth > ul li', function() {
    var cardId = $('#cardInfo select[name="cardList"]').val();
    var paymentId = $(this).attr('data-id');

    var dispData = getData(cardId, paymentId);
    draw(dispData, cardId, paymentId);

    var tabId = $(this).attr('data-tab');

    if (tabId == "t0") {
      $('#siharai').show();
      $('#cardInfo').show();
      $('#cardInfo').addClass('col-sm-8');

      $('#siharai.remove').remove();
    } else if (tabId == "t1") {
      $('#siharai').hide();
      $('#cardInfo').show();
      $('#cardInfo').removeClass('col-sm-8');
      $('#siharai.remove').remove();
    } else if (tabId == "t2") {
      $('#siharai').show();
      $('#cardInfo').hide();

      $('#siharai.remove').remove();
      $('#siharai').clone(true).insertAfter('#siharai').addClass('remove add1');
      $('#siharai.add1').clone(true).insertAfter('#siharai.add1').addClass('remove add2').removeClass('add1');
      $('#siharai.add1 div.seikyu span').text(data.addInfo[0].price);
      $('#siharai.add2 div.seikyu span').text(data.addInfo[1].price);
    } else if (tabId == "t9") {


      alert("これが動かない");


    }
  });

###補足情報(言語/FW/ツール等のバージョンなど)

ライブラリは下記を利用しています。

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js

よろしくお願いいたします。

Answer 1

理由：
支払い履歴をフィルタリングするときに、１けんもないばあいに止まる

// 以下のフィルタで、 t9 を選択した時に条件に合致する1件も支払い履歴がないので
// 
var thisPayment = data.paymentInfo.filter(function(item, index) {
    if (item.relating_with_card == cardId && item.id == paymentId) {
      return true;
    }
});

// のちの呼び出し以下の第一引数に紐づく  
// dispData.thisPayment
// が未定義となり
draw(dispData, cardId, paymentId);

// 未定義となりのthisPaymentのパラメタ yearを読むのでそこで泊まる。
  $meisaiAt.text(dispData.thisPayment.year + "年 " + dispData.thisPayment.month + "月");

解決方法：
仕様に基づくのでわからないです。ただ、1件もない場合の処理の追加か、処理の見直しかと。

Comments

[ksyunnnn]

なるほど、、！
完全に自分の作ったロジックミスですね。。
確認します。ありがとうございます！

Answer 2

関数の読み込みの順番を変更することで対処しました。

ご回答いただきありがとうございました！

Answer 3

var tabId = $(this).attr('data-tab');
の下に
console.log(tabId)
とした時、ちゃんとt9をつかめていますか？

Comments

[ksyunnnn]

コメントありがとうございます。
確認したところ掴めていないようでした。

[ksyunnnn]

そもそも
.on('click'。。。
が反応していないようでした、、なぜなのでしょうか、、m(__)m

[ksyunnnn]

連続でコメントすいません
上記嘘つきました。.on('click'。。。は反応していました。。