内容

确认请求

通常，你需要在发出请求之前确认操作。htmx 支持该hx-confirm 属性，允许你使用简单的 javascript 对话框确认操作：

<button hx-delete="/account" hx-confirm="Are you sure you wish to delete your account?">
    Delete My Account
</button>

使用事件，你可以实现更复杂的确认对话框。确认示例 显示了如何使用sweetalert2库来确认 htmx 操作。

使用事件确认请求

另一个确认选项是通过htmx:confirm事件。此事件在请求的每个触发器上触发（而不仅仅是在具有hx-confirm属性的元素上），可用于实现请求的异步确认。

下面是对带有属性的任何元素使用甜蜜警报的示例confirm-with-sweet-alert='true'：

document.body.addEventListener('htmx:confirm', function(evt) {
  if (evt.target.matches("[confirm-with-sweet-alert='true']")) {
    evt.preventDefault();
    swal({
      title: "Are you sure?",
      text: "Are you sure you are sure?",
      icon: "warning",
      buttons: true,
      dangerMode: true,
    }).then((confirmed) => {
      if (confirmed) {
        evt.detail.issueRequest();
      }
    });
  }
});