changeをselectを監視してイベントが発生したらshow();させたいのですが

Question

以下のように#ss1を監視して、changeがあれば#s21をshow();したいのですが
動作してくれません。。。ログでエラーは出ておらず、どこに問題があるのかわからないため、ご助言いただければ幸いです。
よろしくお願い申し上げます。

【追記】
不具合としては、changeでイベントが発生していないように思われます。
仮にifの後にelseでconlole.log()をしても何も出力されないためです。
可能性として思い当たるとすれば、これらのselectやoption要素が動的に生成されているため、jquery同士が干渉しているのかもしれません。。もし、下記のコード自体に問題がなければそこに問題があると考えています。

<div id="s1" class="center" style="margin-bottom:15px; margin-right:10px;">
												<select name="sources" id="ss1" class="custom-select sources" placeholder="カテゴリ[1] 選択">
													    <option value="">-</option>
															<option value="rent">不動産賃貸</option>
															<option value="purchase">不動産購入</option>
															<option value="others">その他</option>
												</select>
									</div>
									<div id="s21" class="center" style="margin-bottom:15px;margin-right:10px;">
												<select name="sources" id="ss21" class="custom-select sources" placeholder="カテゴリ[2] 選択">
													    <option value="">-</option>
															<option value="house">一戸建て</option>
															<option value="condominium21">マンション</option>
															<option value="apartment">アパート</option>
															<option value="others21">その他</option>
												</select>

$(function(){
	$('#s21,#s22,#s31').hide();


$('#ss1').on("change",function(){
  var s1 = $('#ss1').val();
  if (s1=="rent") {
    $('#s21').show();
  }
})
});

Comments

[s8_chu]

changeイベントが発生して、かつid="ss1"で不動産賃貸が選択されたときにid="s21"が表示されるというように動作しているように見えるのですが、どのように動作していないのかを詳しく追記していただけませんか？

[SugiuraY]

コメントありがとうございます。追記させていただきます

[mr-hisa-child]

動的に要素を追加して試してみましたが、イベントは発生しました。動的に生成するソースも見せていただきたいです。

[saban]

ご提示のソースで<option value="rent">不動産賃貸</option>を選択すると id="s21"がshowになりました。

[SugiuraY]

皆さま、コメントを頂き、有難うござきます。やはり自分のコードに組み込んだ場合、機能しないためもう一度問題点を洗い出してみます。

Answer 1

可能性として思い当たるとすれば、これらのselectやoption要素が動的に生成されているため、jquery同士が干渉しているのかもしれません。。もし、下記のコード自体に問題がなければそこに問題があると考えています。

試せば分かる事なので追記する前にご自身で試してください。
結論からいえば、動きます。

• .on('change') - JSFiddle

selectやoption要素が動的に生成されているなら、動的に生成される前に .on() しても動きません。
.on() した時点でselect要素ノードが存在しない為にイベントを定義する事が出来ないからです。
対策は2つ。

• 動的に生成された後に .on() する
• バブリングする上位ノードで待ち受ける

サンプルコード。

• .on('change', '#ss1') - JSFiddle

Re: SugiuraY さん

Comments

[SugiuraY]

コメント頂き、まことに有難うございます。
本コード自体が機能することは、此方でも確認できました、おそらく他のスクリプトと含めて検証しなければ解決しない問題と思われます。
自身で改めてもう一度、確認してみます。
宜しくお願い申し上げます。