Jquery第二次更改未觸發

我遇到了一個問題，即我的第二個事件偵聽器似乎沒有正常執行。我正在尋找更新我的div中的文字，從下拉列表中選擇每個選項，但文字只會在第一次更改時發生變化。之後，儘管下拉菜單正確觸發，但文字在任何時候都不會隨任何更改而更新。我覺得它一定是選擇器的問題，但我不是100％肯定的，我對Jquery很新。我在下面附上小提琴來展示我的問題。任何幫助是極大的讚賞。 https://jsfiddle.net/042swvdx/4/Jquery第二次更改未觸發

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

來源

2016-04-28 user1893630

的問題是不是第二個事件在不觸發。您的第一個「更改」事件設置爲您的<form id='first'>標記。這意味着每當用戶更改表單標籤內的某些內容時，它將觸發新的事件。我懷疑你想將你的第一個事件設置爲第一個select元素。我改變了你的第一個的ID選擇這樣的：在的jsfiddle工作版本

<form> <select id='first'>

看here。

來源

2016-04-28 17:39:41 michip96

Jquery第二次更改未觸發

回答

相關問題