2番目のイベントリスナーが正しく動作していないような問題が発生しています。私はドロップダウンからの各選択で私のdivのdescripのテキストを更新するために探していますが、テキストは最初の変更のために変更されます。その後、ドロップダウンメニューが適切に実行されているにもかかわらず、テキストは変更のいずれの時点でも更新されません。私はセレクタに問題があるかのように感じますが、私は100%確実ではなく、Jqueryにとってはとても新しいものです。私は私の問題を示して下のフィドルを添付しました。どんな助けでも大歓迎です。 https://jsfiddle.net/042swvdx/4/Jquery second change not firing
HTML:
<h1 style='text-align:center;'>Accu Tab Submittal Builder</h1>
<br>
<div style='text-align:center;'>
<div id='descrip'>
<p>Please select a chlorinator model</p>
</div>
<form id='first'>
<select>
<option selected disabled>Chlorinator Models</option>
<option value='Accu-tab 2075'>Accu-Tab 2075</option>
<option value='Accu-tab 2150'>Accu-Tab 2150</option>
<option value='Accu-tab 2300'>Accu-Tab 2300</option>
<option value='Accu-tab 2600'>Accu-Tab 2600</option>
<option value='POWER PRO 3075'>3075 Power Pro</option>
<option value='POWER PRO 3150'>3150 Power Pro</option>
<option value='POWER PRO 3530'>3530 Power Pro</option>
<option value='POWER PRO 30600'>30600 Power Pro</option>
<option value='POWER PRO 361000'>361000 Power Pro</option>
<option value='POWER PRO 481200'>481200 Power Pro</option>
</select>
<select id='second' style="display:none;">
<option selected disabled>Select Flow</option>
<option value='Gravity'>Gravity</option>
<option value='Standard'>Standard</option>
</select>
<select id='third' style='display: none;'>
<option value='1 PH'>1 Phase</option>
<option value='3 PH'>3 Phase</option>
</select>
<select id='fourth' style="display:none;">
<option disabled selected>Control Type</option>
<option>No Control</option>
<option>WEG</option>
<option>VFD</option>
</select>
<button style='display: none'>Submit</button>
のjQuery:
$("#first").change(function() {
$("#descrip").html("<p>Please select the flow type for this system.</p>");
$("#second").show();
});
$("#second").change(function() {
$("#descrip").html('<p>Please select the phase of the motor for this unit.</p>');
$("#third").show();
});
$("#third").change(function() {
$("#descrip").html("<p>Please select units control type.</p>");
$("#fourth").show();
});
$("#fourth").change(function() {
$("#descrip").html("");
$("button").show();
});