if文に入る場合と入らない場合がある(クロームデバッグ中は100%入る)

Question

下記の処理でクロームのデバッグだとif文に入るのですが、デバッグをしないと入りません。
お分かりになる方よろしくお願いいたします。

【処理概要】
セレクトボックスでに数字を設定しており、選択した数だけDiv要素のコピーを生成する。
2回目以降の選択ではセレクトボックス変更前の値を取得し、前回生成した数を削除してから生成を行う。

【うまくいかないこと】
前回生成したDiv要素削除処理（If文）が走る時と走らない時があります。
クロームのデバッグだと100%走るので原因が分からずにいます。

【教えて欲しいこと】
なぜこのような事象が起きているのかとその対処方法

追加情報が必要でしたらお申し付けください。
よろしくお願いします。

【追記】
HTMLを追記しました。
id:owhAppSctn13内のセレクトボックスで選択した値の数だけid:owhAppSctn14をコピーします。
コピーのidはowhAppSctn15.16.17...と連番になります。

【追記2】
動きを見ているとif文を除去しても削除処理が起きませんでした（デバッグだと起きます）

<div id="owhAppSctn13" class="owhAppPageCon">
	<div class="owhAppPageInnrCon">
		<div class="owhAppFormItem">
			<p class="owhAppFormItemName">
				<span class="required">＊</span>第1セクションのタイトルを入力してください。
			</p>
			<div class="owhAppFormInput">
				<input type="text" name="name"">
			</div>
		</div>
		<div class="owhAppFormItem">
			<p class="owhAppFormItemName">
				<span class="required">＊</span>第1セクションのサブセクション数を選択してください。
			</p>
			<div class="sectionSelect subSctn1choice">
				<select name="name">
					<option hidden>サブセクション数を選択</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
				</select>
			</div>
		</div>
		<a href="#" class="fxNxtScButton">
			<div class="owhAppStartButton">次へすすむ</div>
		</a>
	</div>
</div>

<!-- コピー元 -->
<div id="owhAppSctn14" class="owhAppPageCon subSection">
	<div class="owhAppPageInnrCon">
		<div class="owhAppFormItem">
			<p class="owhAppFormItemName">
				<span class="required">＊</span>サブセクション1のタイトルを入力してください。<br>
			</p>
			<div class="owhAppFormInput">
				<input type="text" name="name">
			</div>
		</div>
		<div class="owhAppFormItem">
			<p class="owhAppFormItemTxtArea">
				<span class="required">＊</span>サブセクション1についての説明文を入力してください。<br>
			</p>
			<div class="owhAppFormTextArea">
				<textarea name="otoiawase"></textarea>
			</div>
		</div>
		<a href="#" class="fxNxtScButton">
			<div class="owhAppStartButton">次へすすむ</div>
		</a>
	</div>
</div>

    let bfrVal; //前回セレクトで選択した値

    //セレクトボックスフォーカス・変更で発動
    $('.subSctn1choice select').on('focus', function() {
      bfrVal = $(this).val();
    }).change(function() {
      let baseObj = $('#owhAppSctn14'); //コピー元のDiv要素
      createSbSctn($(this), baseObj);
    });

    // Div生成処理
    function createSbSctn(thisObj, baseObj) {
      //選択したvalue値を変数に格納
      let sbSctnVal = thisObj.val();
      let crntId; //現在要素のID
      let nxtId; //次要素のID
      let trgtRmv; //削除対象のID
      let crntObj = baseObj; //現在要素
      let nxtObj; //次要素
      let sbSctnCln; //サブセクション

      //**********ここから削除処理****************************************
　　　//変更前の値が数値の場合はその数だけ要素を削除する
      if ($.isNumeric(bfrVal)){
        //開始idを割り出す
        crntId = baseObj.attr('id').slice(-2);
        crntId = Number(crntId);

        //削除対象要素分繰り返す
        for (let i=0; bfrVal>i; i++){
          crntId++;
          trgtRmv = "#owhAppSctn"+crntId;
          trgtRmv = $(trgtRmv);
          trgtRmv.remove();
        }
      }
      //**********ここまで削除処理****************************************

      // プルダウンで選択した数のサブセクションを生成する
      for (let i=0; sbSctnVal>i; i++){

        sbSctnCln = baseObj.clone(); //要素コピー
        nxtId = sbSctnCln.attr('id').slice(-2); //ID下２桁を抽出
        nxtId = Number(nxtId); //数値に変換
        nxtId = "owhAppSctn"+(nxtId+i+1); //次のIDを割り出す
        nxtObj = "#"+nxtId; //次要素を生成

        sbSctnCln.attr('id',nxtId); // コピーした要素にIDを付与

        //要素の後ろにコピーした要素を追加する
        crntObj.after(sbSctnCln);
        nxtObj = $(nxtObj); //次要素を生成
        crntObj = nxtObj; //更新

      }
    }

Comments

[Lhankor_Mhy]

HTMLをご提示いただけますか？

[mcy]

追記いたしました。

Answer 1

if文というのは

if ($.isNumeric(bfrVal)){

↑だと思いますが、bfrValは以下のコードで変更されているようです。

    $('.subSctn1choice select').on('focus', function() {
      bfrVal = $(this).val();
    }).change(function() {

focusイベントを起こさずにセレクトボックスの値を変えた場合、focusイベントのコードが動作せずにchangeイベントのコードが動作しますから、bfrValは変更されず「サブセクション数を選択」という値のままですので、if文の条件が成立することはないかと思います。

実際に試してみましたが、セレクトボックスの値を選択した後に、フォーカスを外さず値を変更すると、そのようなふるまいになりました。

Comments

[mcy]

完全におっしゃる通りでした！
デバッグでフォーカスが外れていたのですね。。
ありがとうございます！