selectboxのchangeイベントが取れない

Question

実現したいこと

selectboxのchangeイベントで項目を変更したい

前提

ruby on rails5.2 / jQueryでセレクトボックスの連動を実装中です。

よくある、親が選択されたら子が変わる都道府県セレクトボックスのようなものです。

親のセレクトボックスは、記載のコードで動いてますが、
子のセレクトボックスが、chengeイベント内に入ってきません。

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

consoleにエラーなどは出ていません。

該当のソースコード

let defaultOrganizationSelect = '<select name="listing_smart_lock[smart_lock_organization]" id="template__select"><option value>選択してください</option></select>';
let defaultDoorSelect = '<select name="listing_smart_lock[smart_lock_door]" id="template__select2"><option value>選択してください</option></select>';

$(document).on('change', '#listing_smart_lock__smart_lock_provider__select', function() {
  let providerId = $('#listing_smart_lock__smart_lock_provider__select').val();
  if (providerId !== "") {
    let selectedTemplate = $(`#listing_smart_lock__template__org__select${providerId}`);
    $('#listing_smart_lock__smart_lock_organization__div').empty();
    $('#listing_smart_lock__smart_lock_organization__div').prepend(selectedTemplate.html());
  }else {
    $('#listing_smart_lock__smart_lock_organization__div').empty();
    $('#listing_smart_lock__smart_lock_organization__div').prepend(defaultOrganizationSelect);
  };
});

$(document).on('change', '#listing_smart_lock__smart_lock_organization__select', function() {
  alert("これが呼ばれない");
  let organizationId = $('#listing_smart_lock__smart_lock_organization__select').val();
  console.debug(organizationId);
  if (organizationId !== "") {
    let selectedTemplate = $(`#listing_smart_lock__template__door__select${organizationId}`);
    $('#listing_smart_lock__smart_lock_door__div').empty();
    $('#listing_smart_lock__smart_lock_door__div').prepend(selectedTemplate.html());
  }else {
    $('#listing_smart_lock__smart_lock_door__div').empty();
    $('#listing_smart_lock__smart_lock_door__div').prepend(defaultDoorSelect);
  };
});

<label for="listing_smart_lock_smart_lock_provider_id">メーカー</label>
<select id="listing_smart_lock__smart_lock_provider__select" name="listing_smart_lock[smart_lock_provider_id]"><option value="">選択してください</option>
<option value="1">ほげ</option></select>
<p></p>
<label for="listing_smart_lock_smart_lock_organization_id">事業所</label>
<div id='listing_smart_lock__smart_lock_organization__div'>
<select id="listing_smart_lock__smart_lock_organization__select" class="" name="listing_smart_lock[smart_lock_organization_id]"><option value="">選択してください</option>
</select>
</div>

試したこと

試しに、子のセレクトボックスをclickにすると反応しました(alertが呼ばれました)。
ということは、
id = listing_smart_lock__smart_lock_organization__select
は認識できてそうです。
なぜchangeイベントが反応しないのでしょう？

$(document).on('click'```

他にjsファイルを２つに分けてみましたが同じでした。

どうすればchangeイベントが取れるでしょうか？

Comments

[int32_t]

子のセレクトボックスを操作して値を変える直前にブラウザの開発者ツールで id="listing_smart_lock__smart_lock_organization__select" が存在することは確認しましたか?

> 試しに、子のセレクトボックスをclickにすると反応しました(alertが呼ばれました)。

親の<select>を操作する前後で挙動は同じでしたか?

[pecmm]

子セレクトボックスに含まれる option を増やしてみたらどうなりますか？

Answer 1

親の変更で子を書き換える際にに子のidに「listing_smart_lock__smart_lock_organization__select」をしていないのでは？
また、子セレクトボックスはオプションが１つしかない場合はchangeできないので注意ください

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
var html=`<select id="c_select">
<option value="">選択してください</option>
<option value="2">ふが</option>
</select>`;
$(document).on('change','#p_select',function(){
  $('#c_area').html(html);
});
$(document).on('change','#c_select',function(){
  alert("change");
});
</script>

<select id="p_select">
<option value="">選択してください</option>
<option value="1">ほげ</option>
</select>
<div id="c_area">
<select id="c_select">
<option value="">選択してください</option>
</select>
</div>

Comments

[pecchan]

サンプルまで有難う御座います。
おっしゃる通りでした。