Jquery zweite Änderung nicht feuernd

Question

Ich habe ein Problem, bei dem mein zweiter Event-Listener nicht ordnungsgemäß funktioniert. Ich suche, um den Text in meinem Div Beschreibungs mit jeder Auswahl von einem Dropdown zu aktualisieren, aber der Text wird nur für die erste Änderung geändert. Danach wird der Text trotz der ordnungsgemäßen Aktivierung der Dropdown-Menüs zu keinem Zeitpunkt mit den Änderungen aktualisiert. Ich habe das Gefühl, dass es ein Problem mit den Selektoren sein muss, aber ich bin nicht 100% sicher und ich bin sehr neu in Jquery. Ich habe unten die Geige angebracht, die mein Problem zeigt. Jede Hilfe wird sehr geschätzt. https://jsfiddle.net/042swvdx/4/

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(); 
}); 

Answer 1

Das Problem ist nicht, dass das zweite Ereignis nicht feuert. Ihr erstes "Change" -Event ist auf Ihr <form id='first'>-Tag festgelegt. Dies bedeutet, dass jedes Mal, wenn etwas in Ihrem Formular-Tag vom Benutzer geändert wird, ein neues Ereignis ausgelöst wird. Ich nehme an, dass Sie Ihr erstes Ereignis auf das erste ausgewählte Element festlegen möchten. Ich änderte die ID des ersten wie folgt wählen:

<form> <select id='first'> 

Blick here für die Arbeits Version bei JSFiddle.