Jquery 第二次更改未触发

Question

我遇到了一个问题，我的第二个事件侦听器似乎没有正常运行。我希望通过下拉列表中的每个选择来更新 div 描述中的文本，但文本只会在第一次更改时更改。之后，尽管下拉菜单正确触发，但文本在任何时候都不会随着任何更改而更新。我觉得这一定是选择器的问题，但我不是 100% 确定而且我对 Jquery 很陌生。我附上了下面显示我的问题的 fiddle。任何帮助是极大的赞赏。 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

问题不在于第二个事件没有触发。您的第一个 'change' 事件设置为您的 <form id='first'> 标签。这意味着每次用户更改表单标签内的内容时，它都会触发一个新事件。我认为您希望将第一个事件设置为第一个 select 元素。我像这样更改了您的第一个 select 的 ID：

<form> <select id='first'>

在 JSFiddle here 上查找工作版本。

Jquery 第二次更改未触发

Jquery second change not firing

jquery

event-listener

selector