当第一个 SELECT 一遍又一遍地改变时，第二个 SELECT 获得递增的增量运行

Question

我有两个 select 元素。第一个 (S1) 控制案例类型。选择 S1 的第一个选项 (O1) 时显示第二个 (S2)。 S2 then hides when S1's second option (O2) is selected.为了测试，我将其写入控制台。简单是吗？我没有问题。

问题是...当我选择 S1>O1，然后选择 S2>O1 一切正常，如控制台中所示。然后我选择 S1>O2 和 S2 隐藏。这也符合预期。然后我再次选择 S1>O1。 S2 重置并按预期显示。但是，当我选择 S2>any 选项时，控制台显示它增加了并且是运行 S2 的 onChange 事件多次。每次我在 S1>O1 和 S1>O2 之间切换时，增量都会增加，最终会锁定屏幕。

我不知道为什么要这样做。我可能遗漏了什么。任何帮助将不胜感激。 Fiddle在下面。

https://jsfiddle.net/wswilliams/a5qu1km6/

提前致谢。

$("#fld_Severity").hide();

$("#fld_CaseType").on("change", function() {
  if ($("#fld_CaseType").children("option:selected").val() == 26) {
    $('#fld_Severity').val('0')
    $("#fld_Severity").show();
    $("#fld_Severity").on("change", function() {
      console.log("Severity looped.");
    });
  };

  if ($("#fld_CaseType").children("option:selected").val() == 30) {
    $("#fld_Severity").hide();
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="fld_CaseType" name="case_type" data-stop-refresh="true">
  <option value="0" selected>Select a case type ...</option>
  <option value="26">Case type 1</option>
  <option value="30">Case Type 2</option>
</select>

<select id="fld_Severity" name="severity_id" data-stop-refresh="true">
  <option value="0">Select a severity ...</option>
  <option value="4">Severity 1</option>
  <option value="3">Severity 2</option>
</select>

Answer 1

发生这种情况是因为每次您的代码运行 fld_CaseType 的更改事件时，它都会为 fld_Severity 添加一个额外的事件侦听器。因此，如果您更改 fld_CaseType 5 次，您将有 5 个事件侦听器侦听更改，这意味着代码将执行 5 次（每个事件侦听器一次）。

要解决此问题，您需要使用 jquery .off() 函数从 fld_Severity 中删除任何 'change' 事件侦听器，然后再添加新的。

$("#fld_Severity").off("change");

我在下面创建了一个工作片段：

$("#fld_Severity").hide();

$("#fld_CaseType").on("change", function() {
  if ($("#fld_CaseType").children("option:selected").val() == 26) {
        $('#fld_Severity').val('0');
        $("#fld_Severity").show();
        $("#fld_Severity").off("change"); //remove on change event listener 
        $("#fld_Severity").on("change", function() {
          console.log("Severity looped.");
        });
  }

  if ($("#fld_CaseType").children("option:selected").val() == 30) {
    $("#fld_Severity").hide();
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="fld_CaseType" name="case_type" data-stop-refresh="true">
<option value="0" selected>Select a case type ...</option>
<option value="26">Case type 1</option>
<option value="30">Case Type 2</option>
</select>

<select id="fld_Severity" name="severity_id" data-stop-refresh="true">
<option value="0">Select a severity ...</option>
<option value="4">Severity 1</option>
<option value="3">Severity 2</option>
</select>

或者，您可以将事件侦听器代码移到 fld_CaseType 的更改事件之外，这样它只会被调用一次

例如

$("#fld_Severity").on("change", function() {
    console.log("Severity looped.");
});

$("#fld_CaseType").on("change", function() {
    if ($("#fld_CaseType").children("option:selected").val() == 26) {
        $('#fld_Severity').val('0');
        $("#fld_Severity").show();       
    }
    if ($("#fld_CaseType").children("option:selected").val() == 30) {
        $("#fld_Severity").hide();
    }
});

当第一个 SELECT 一遍又一遍地改变时，第二个 SELECT 获得递增的增量运行

Second SELECT getting an increasing incremental run when first SELECT is changed over and over

jquery

onchange

当第一个 SELECT 一遍又一遍地改变时，第二个 SELECT 获得递增的增量 运行

Second SELECT getting an increasing incremental run when first SELECT is changed over and over

jquery

onchange

当第一个 SELECT 一遍又一遍地改变时，第二个 SELECT 获得递增的增量运行