Как я могу повторно привязать текущее событие JavaScript к другому элементу?

Question

Я пытаюсь перехватить событие JavaScript и preventDefault, чтобы отобразить модальное окно предупреждения. Если пользователь решает принять предупреждение, он нажимает «Продолжить» и продолжает делать то, что делал. Однако существует несколько возможных событий, из-за которых это могло произойти, поэтому я подумал, что лучший способ справиться с этим - просто привязать текущее событие к кнопке «Продолжить».

Это код, который у меня есть до сих пор :

$(document).on('click', 'nav.pagination a', function(e) {
  e.preventDefault;

  var checkedBoxes = $('.checkbox-pagination-warning:checked');

  if(checkedBoxes.length > 0) {
    $('.checked-box-warning-modal').modal("open");
    // This is where I would attach the event to this button:
    //
    // $('.checked-box-warning-modal a.continue')
  } else {
    $(this).unbind("click");
  }
})

Для контекста, я предупреждаю пользователя, что на странице есть отмеченные флажки, прежде чем он перейдет на страницу или перейдет на страницу.

Также разбиение на страницы обрабатывается Stimulus.

Это пример HTML:

<nav class="pagination">
  <a href="/entities/1?signatories_page=1" class="pagination-first-page" data-action="click->entities--add-existing-signatories#onPaginate">
    1
  </a>

  <span class="pagination-current-page">
    2
  </span>
</nav>

Итак, как я могу привязать событие, которое я запустил preventDefault, к кнопке «Продолжить», чтобы событие продолжалось как ни в чем не бывало?

Answer 1

Я заметил, что у вас есть ошибка при определении действия данных здесь:

  <a href="/entities/1?signatories_page=1" class="pagination-first-page"click->entities--add-existing-signatories#onPaginate">
1

[обновление] Итак, я думаю, вы можете предотвратить действие ссылки на страницы с помощью event.preventDefault ( ). Затем вы запускаете глобальное событие, которое вы фиксируете в верхнем контроллере. Вы передадите текущую ссылку пагинации (event.target) этому новому событию, которое вы захватите в новом контроллере.

Что-то вроде:

  <!-- this controller will handle showing the modal when asked -->
  <div data-controller="main" data-action="recheck@document->main#checkWithModal">

    <!-- this is the controller that captures the click on pagination links -->
    <div data-controller="pagination"></div>
  </div>


  ----- javascript

  You would use this to dispatch the event

  document.dispatchEvent(new Event('recheck', {bubbles: true, detail: { existing event target here }}))