Второй SELECT получает увеличивающийся инкрементный прогон, когда первый SELECT меняется снова и снова - PullRequest
Новая
       9

Второй SELECT получает увеличивающийся инкрементный прогон, когда первый SELECT меняется снова и снова

0 голосов
/ 08 января 2019

У меня есть два select элемента. Первый (S1) управляет типом дела. Второй (S2) отображается, когда выбран первый параметр (O1) из S1. S2 затем скрывается, когда выбран второй параметр S1 (O2). Для тестирования у меня есть запись в консоль. Просто да? У меня это работает без проблем.

Проблема в том, что ... когда я выбираю S1> O1, затем выбираю S2> O1, все нормально, как видно в консоли. Затем я выбираю S1> O2 и S2 скрывает. Что также, как и ожидалось. Затем я снова выбираю S1> O1. S2 сбрасывается и отображается как ожидалось. НО, когда я выбираю S2> любую опцию, консоль показывает, что она увеличивается и запускает событие onChange S2 несколько раз. Каждый раз, когда я переключаюсь между S1> O1 и S1> ​​O2, приращение увеличивается, что в конечном итоге блокирует экран.

Понятия не имею, почему он это делает. Я, наверное, что-то упустил. Любая помощь будет принята с благодарностью. Скрипка ниже.

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>

1 Ответ

0 голосов
/ 08 января 2019

Это происходит потому, что каждый раз, когда ваш код запускает событие изменения для fld_CaseType, он добавляет дополнительные прослушиватели событий для fld_Severity. так что если вы изменили fld_CaseType 5 раз, то 5 слушателей событий прослушали бы изменение, означающее, что код будет выполнен 5 раз (один раз для каждого слушателя событий).

Чтобы исправить это, вам нужно удалить любой слушатель события 'change' из fld_Severity с помощью функции jquery .off () перед добавлением нового. 

$("#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();
    }
});
...