change() работает только 2 раза, а дальше не работает

246
30 ноября 2017, 00:45

Висит обработчик на select Он срабатывает только 2 раза, а за тем остается старое значение, из-за чего это может быть

$('#type_services').change(function() {
  var service = $('select option:selected').val();
  switch (service) {
    case 'Автомобильные перевозки':
      $('#step_final').hide();
      var add =
        '<div id="step_final"><hr><div class="form-group" ><label for="geografy" class="control-label col-md-3">География услуги(страны, в которых работает компания)</label><div class="col-md-5 filter_height">@foreach($country_uslugi as $cat)<label class="list-group-item"><input type="checkbox" value="{{$cat->name}}" name="brands" id="brands">  {{$cat->name}}</label>@endforeach</div></div><hr><div class="form-group "><label for="geografy" class="control-label col-md-3">Тип перевозки</label><div class="col-md-5 usl"><label class="list-group-item"><input type="checkbox" value="tent" name="type_container" id="type_container">  Тент</label><label class="list-group-item"><input type="checkbox" value="refrejeractor" name="type_container" id="type_container">  Рефрежиратор</label><label class="list-group-item"><input type="checkbox" value="container" name="type_container" id="type_container">  Контейнер</label><label class="list-group-item"><input type="checkbox" value="nogabarit" name="type_container" id="type_container">  Негабарит</label><label class="list-group-item"><input type="checkbox" value="open" name="type_container" id="type_container">  Открытая</label></div></div><div class="form-group "><label for="geografy" class="control-label col-md-3">Максимальный вес груза(в тонах)</label><div class="col-md-5"><input class="form-control" name="weight" id="weight" pattern="[0-9]{1,20}" required></div></div></div>';
      $('.panel-body').append(add);
      break;
    case 'Авиационные перевозки':
      $('#step_final').hide();
      var add =
        '<div id="step_final"><hr><div class="form-group" ><label for="geografy" class="control-label col-md-3">География услуги(страны, в которых работает компания)</label><div class="col-md-5 filter_height">@foreach($country_air as $cat)<label class="list-group-item"><input type="checkbox" value="{{$cat->rus}}" name="brands" id="brands">  {{$cat->rus}}</label>@endforeach</div></div><div class="form-group "><label class="control-label col-md-3">максимальный вес груза(в тонах)</label><div class="col-md-4"><input class="form-control" name="weight" id="weight" pattern="[0-9]{1,20}" required></div></div><div class="form-group "><label class="control-label col-md-3">Максимальная длина груза(в см)</label><div class="col-md-4"><input class="form-control" name="length" id="length" pattern="[0-9]{1,20}" required></div></div><div class="form-group "><label class="control-label col-md-3">Максимальная ширина груза(в см)</label><div class="col-md-4"><input class="form-control" name="width" id="width" pattern="[0-9]{1,20}" required></div></div><div class="form-group "><label class="control-label col-md-3">Максимальная высота груза(в см)</label><div class="col-md-4"><input class="form-control" name="height" id="height" pattern="[0-9]{1,20}" required></div></div></div>';
      $('.panel-body').append(add);
      break;
    case 'Морские перевозки':
      $('#step_final').hide();
      var add =
        '<div id="step_final"><hr><div class="form-group" ><label for="geografy" class="control-label col-md-3">География услуги(страны, в которых работает компания)</label><div class="col-md-5 filter_height">@foreach($country_ship as $cat)<label class="list-group-item"><input type="checkbox" value="{{$cat->name}}" name="brands" id="brands">  {{$cat->name}}</label>@endforeach</div></div><div class="form-group "><label for="geografy" class="control-label col-md-3">Тип перевозки</label><div class="col-md-5 usl"><label class="list-group-item"><input type="checkbox" value="1" name="type_container" id="type_container">  20 футовый стандартный</label><label class="list-group-item"><input type="checkbox" value="2" name="type_container" id="type_container"> 40 футовый стандартный</label><label class="list-group-item"><input type="checkbox" value="3" name="type_container" id="type_container"> 20 футовый рефрижираторный</label><label class="list-group-item"><input type="checkbox" value="4" name="type_container" id="type_container"> 40 футовый рефрижираторный</label><label class="list-group-item"><input type="checkbox" value="5" name="type_container" id="type_container"> 20 футовый OPENTOP</label><label class="list-group-item"><input type="checkbox" value="6" name="type_container" id="type_container"> 40 футовый OPENTOP</label><label class="list-group-item"><input type="checkbox" value="7" name="type_container" id="type_container"> 40 футовый HIGHCUBE</label><label class="list-group-item"><input type="checkbox" value="8" name="type_container" id="type_container"> 45 футовый HIGHCUBE</label></div></div></div>';
      $('.panel-body').append(add);
      break;
    case 'Ж/д перевозки':
      $('#step_final').hide();
      var add =
        '<div id="step_final"><hr><div class="form-group" ><label for="geografy" class="control-label col-md-3">География услуги(страны, в которых работает компания)</label><div class="col-md-5 filter_height">@foreach($country_train as $cat)<label class="list-group-item"><input type="checkbox" value="{{$cat->name}}" name="brands" id="brands">  {{$cat->name}}</label>@endforeach</div></div><div class="form-group "><label for="geografy" class="control-label col-md-3">Тип перевозки</label><div class="col-md-5 usl"><label class="list-group-item"><input type="checkbox" value="tent" name="type_container" id="type_container">  Крытый</label><label class="list-group-item"><input type="checkbox" value="refrejeractor" name="type_container" id="type_container"> Рефрежиратор</label><label class="list-group-item"><input type="checkbox" value="container" name="type_container" id="type_container"> Контейнер</label><label class="list-group-item"><input type="checkbox" value="nogabarit" name="type_container" id="type_container"> Негабарит</label><label class="list-group-item"><input type="checkbox" value="open" name="type_container" id="type_container"> Открытая платформа</label></div></div><div class="form-group "><label for="geografy" class="control-label col-md-3">Максимальный вес груза(в тонах)</label><div class="col-md-4"><input class="form-control" name="weight" id="weight" pattern="[0-9]{1,20}" required></div></div></div>';
      $('.panel-body').append(add);
      break;
    case 'Товары и услуги':
      $('#step_final').hide();
      break;
    default:
      $('#step_final').hide();
      var add =
        '<div id="step_final"><hr><div class="form-group" ><label for="geografy" class="control-label col-md-3">География услуги(области, в которых работает компания)</label><div class="col-md-5 filter_height">@foreach($country as $cat)<label class="list-group-item"><input type="checkbox" value="{{$cat->name}}" name="brands" id="brands">  {{$cat->name}}</label>@endforeach</div></div></div>';
      $('.panel-body').append(add);
  }
});
Answer 1

Это может быть... нет, это точно из-за того, что Вы создаете элементы с повторяющимся id="step_final" (и другими), по которому затем ищите. Выборка по id возвращает максимум один элемент - тот, который Вы уже спрятали.

Если ранее существовавший step_final Вам больше не нужен, используйте

$('#step_final').remove();

вместо

$('#step_final').hide();
READ ALSO
Проблема с добавлением новой вкладки в HTML

Проблема с добавлением новой вкладки в HTML

Есть готовый кодПростой и понятный

293
JS проверка на пустое значение input

JS проверка на пустое значение input

Пытаюсь проверить input, на значение value, при наличии в нем строки и безСтрока (Путь до файла), сразу же подгружается через callback или нажатием кнопки,...

421
Как выводить элемент только у одного чекбокса?

Как выводить элемент только у одного чекбокса?

Нужно, чтобы при нажатии на чекбокс все остальные кнопки убирались, а кнопка "применить" должна быть только у того чекбокса, который нажат...

313