Каждый четный раз форма Ajax не отправляется
Есть страничка с несколькими формами и одинаковыми полями, но в js отлавливается событие submit конкретной формы и отправляется на сервер. И первый раз все работает хорошо, а вот если второй раз отправить хоть ту же форму с новыми значениями хоть соседнюю - происходит перезагрузка страницы а в адресной строке появлется get-запрос.Если еще раз отправить - то все будет работать правильно.
Сами формочки:
<form class="kvm-form">
<div class="form-group row">
<input type="hidden" value="1" name="kvmid">
<label class="sr-only" for="time-1">Время</label>
<div class="input-group input-group-sm time">
<input type="text" class="form-control" id="time-1" name="timefor" value="02:00">
</div>
<div class="ticket">
<label class="sr-only" for="ticket-1">Тикет</label>
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="num" class="form-control" id="ticket-1" name="ticket">
</div>
</div>
<div class="rack">
<label class="sr-only" for="rack-1">Стойка</label>
<div class="input-group input-group-sm rack">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-server"></i></span>
</div>
<input type="text" class="form-control" id="rack-1" name="rack">
</div>
</div>
<button type="submit" class="btn btn-sm btn-primary" style="width: 100px;">Добавить</button>
</div>
</form>
<form class="kvm-form">
<div class="form-group row">
<input type="hidden" value="2" name="kvmid">
<label class="sr-only" for="time-2">Время</label>
<div class="input-group input-group-sm time">
<input type="text" class="form-control" id="time-2" name="timefor" value="02:00">
</div>
<div class="ticket">
<label class="sr-only" for="ticket-2">Тикет</label>
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="num" class="form-control" id="ticket-2" name="ticket">
</div>
</div>
<div class="rack">
<label class="sr-only" for="rack-2">Стойка</label>
<div class="input-group input-group-sm rack">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-server"></i></span>
</div>
<input type="text" class="form-control" id="rack-2" name="rack">
</div>
</div>
<button type="submit" class="btn btn-sm btn-primary" style="width: 100px;">Добавить</button>
</div>
</form>
//итд..
Ajax (Если что, в коде есть специфика JSON-Api October CMS):
$('form.kvm-form').on('submit', function(event) {
event.preventDefault();
$form = $(this);
$form.request('onKvmUpdate', {
update: {'kvms::kvms-table': '#kvm-table'},
complete: function(data) {
//this.success(data);
//viewKvmModal(data);
console.log(data);
},
});
});
Обработчик просто записывает в БД и отправляет данные для перерендеринга части страниицы.
Я даже специально использовал конструкцию $form = $(this); - но не помогло. Работает ровно через раз. Что может вызвать такое поведение?