Почему не работает change в форме?

25 марта 2021, 05:40

Вот часть формы. Нужно сохранять выбранные значения в localStorage. Пытаюсь это сделать по событию change. Всё хорошо, но вот с блоками класса radioBtn возникла заминка. Дело в том, что значение в соответствующих скрытых инпутах устанавливаются по клике на определённую ссылку. Странно, почему-то скрипт не видит изменения в этих инпутах.

$(document).on('change', '#big_form', function(e) { 
  console.log(12) 
  localStorage.setItem(e.target.id, e.target.value) 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form action="/big_form/" class="mt-3" id="big_form"> 
  <div class="row"> 
    <input class="form-control" id="sum2" name="big-sum2" type="number"> 
    <select id="" name="big-currency2"> 
      <option value="KZT">KZT</option> 
      <option value="USD">USD</option> 
    </select> 
  </div> 
  <div class="row"> 
    <label>Форма выдачи</label> 
    <div class="radioBtn btn-group"> 
      <a class="btn btn-primary btn-sm notActive" data-toggle="tumbler_1" data-title="1">Наличными</a> 
      <a class="btn btn-primary btn-sm notActive" data-toggle="tumbler_1" data-title="2">На счет</a> 
      <a class="btn btn-primary btn-sm active" data-toggle="tumbler_1" data-title="3">На карту</a> 
    </div> 
    <input id="tumbler_1" name="big-issue_form" type="hidden" value="3"> 
  </div> 
  <button type="submit" name="little" style="width: 362px;" class="btn btn-lg btn-primary">Ок</button> 
</form>

Можно, конечно выставить onclick на ссылки, но это не совсем верное решение, что-то мне подсказывает.