0

我正在尝试拦截 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到“继续”按钮，以便事件继续进行，就好像什么都没发生一样？

4

1 回答 1

0

我注意到您在此处定义数据操作时出错：

  <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 }}))
于 2020-05-16T21:46:27.227 回答