Как восстановить JavaScript слушателей событий после перехода со страницы и обратно? - PullRequest
Новая
       10

Как восстановить JavaScript слушателей событий после перехода со страницы и обратно?

0 голосов
/ 10 января 2020

У меня есть приложение Rails 5 (5.2), в котором я обслуживаю страницу, используемую администратором, и множество страниц, по одной для каждого из пользователей. Базовый c формат страницы, обслуживаемой каждой, очень похож, за исключением того, что администратор может корректировать базовые данные в приложении, и поэтому форма администратора содержит много элементов формы - select меню и button для отправьте варианты меню на сервер, чтобы сохранить их, тогда как пользовательские версии сохраняются c для ссылок на других пользователей.

Когда администратор впервые заходит на страницу, кнопка работает должным образом.

Моя проблема в том, что если администратор переходит со своей страницы на страницу пользователя, а затем либо использует кнопку «Назад», либо использует прямую ссылку на страницу администратора, прослушиватель событий больше не присоединяется к button. Точно так же соответствующие события больше не привязаны к кнопкам select.

Как мне исправить это? Предполагается, что каждый раз, когда администратор посещает страницу, события прикрепляются к правильным элементам.

Это видно в моей среде разработки (Ubuntu 18.04 LTS / Firefox или Chrome) и я не проверял, что это происходит в другом месте.

Соответствующий HTML: 

<html>
  <body>
    <div>
      <!-- This button isn't present when the Admin navigates away -->
      <button name="button" type="button" id="update_bracket">Update Bracket</button>
    </div>
  </body>
</html>

Соответствующий CoffeeScript: 

sendGameUpdates = (e) ->
  e.preventDefault();
  $('div.success').text('').removeClass('success')
  target = e.target
  $(target).prop('disabled', true)
  bId = $('table.bracket').data 'bracket_id'
  $.ajax
    contentType: 'application/json'
    type: 'PUT'
    url: $(target).closest('form').attr('action')
    data: JSON.stringify({"bracket": {"game_data": buildGameData(bId)}})
    success: (data, textStatus, jqXHR) ->
      clearNewGameChoiceFlags bId
      reloadPage()
      $(target).prop('disabled', false)
      $('button#update_bracket').on 'click', (e) => sendGameUpdates e
    error: (jqXHR, textStatus, errorThrown) ->
      showError errorThrown, textStatus
      $(target).prop('disabled', false)
      $('button#update_bracket').on 'click', (e) => sendGameUpdates e
  return false

$ ->
  $('button#update_bracket').on 'click', (e) => sendGameUpdates e

Я пытался назначить различные слушатели window (load, pageshow и popstate) и document (readyStateChange, DOMContentLoaded), но ни один из них не восстанавливает обработчик событий для кнопки при навигации как описано.

Очевидно, что есть обходной путь, при котором на странице вызывается refre sh, но кажется, что это не нужно, и он не подходит для модели использования для моего основного пользователь.

...