jquery_ujs и / или turbolinks останавливают события js в кнопке отправки формы

Question

В моем приложении jQuery, jQuery-ujs и turbolinks (зависимости по умолчанию в rails 5 приложениях).

Когда нажата кнопка отправки, я хочу fadeIn загрузочный счетчик (анимированный счетчик из font-awesome).

Предположим, что загрузочный счетчик скрыт на странице. Вот код для кнопки отправки и счетчика:

<div class="actions">
  <%= form.submit id: 'submit-btn' %>
</div>

<div id='load-icon'>
  <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
  <span class="sr-only">Refreshing...</span>
</div>

И затем у меня есть следующее, которое должно поместить слушателя события в эту кнопку отправки, которая затухает в счетчике при нажатии кнопки:

$(document).on('turbolinks:load', function () {
  $('#submit-btn').on('click', function(){
    $('#load-icon').fadeIn();
  });
});

Поиск занимает некоторое время для загрузки информации, но счетчик не появляется. Я знаю, что это связано с турболинками, jQuery-ujs или с обоими, которые мешают выполнению javascript при нажатии кнопки.

В конечном итоге мой вопрос: как я могу запустить javascript при нажатии кнопки отправки формы?

Answer 1

Посмотрите последнюю документацию turbolinks. Используйте document.addEventListener("turbolinks:load", function() { вместо $(document).on('turbolinks:load', function () {. Итак, код выглядит так:

document.addEventListener("turbolinks:load", function() {
  $('#submit-btn').on('click', function(){
    $('#load-icon').fadeIn();
  });
});

Он был проверен и работает нормально для меня.