Отключить кнопку после нажатия с помощью глобального селектора - предотвратить отправку формы

Question

У меня есть все виды кнопок вокруг приложения. кнопки, которые я хочу иметь рядом с ним (чтобы уведомить, что что-то происходит) - я добавляю спецификацию c class ajax_wait.

Я ловлю их с помощью $('.ajax_wait')

Проблема в том, что когда селектор ловит кнопки внутри форм - форма больше не будет отправляться. НО, такое поведение происходит только в Chrome - в Firefox оно все равно будет отправлено ..

Это вызвано из-за .prop('disabled', true) - если я его уберу - он работает нормально.

Но я пытаюсь найти решение, чтобы оно работало глобально (без привязки, передает et c ..), так как я не уверен, что еще он поймает, когда приложение будет расти.

Пытался поставить return true, много чего перепробовал, вроде ничего не работает.

$(function() {
  $('.ajax_wait').on('click', function() {
    $(this)
      .prop('disabled', true)
      .attr('data-text', "Save")
      .html("saving please wait");
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click this button first - see the JavaScript change: <br />
<button type="button" class="ajax_wait"> Generic button </button>

<br />
<br />
<form method='GET'>
  Click this button second in Chrome - it doesn't work <br /> Click this button second in Firefox - it works ?! <br />

  <button type="submit" class="ajax_wait"> Save </button>
</form>

Codepen: https://codepen.io/arlevi/pen/PoqdgEZ

Как видите, кнопки, которые я связываю, не всегда находятся внутри формы, иногда они делают другие вещи - но, как правило, через приложение каждый «ajax_wait» будет помещать сообщение для ожидания ...

Как я могу сделать форму для отправки вместе с .prop('disabled', true)?