hx-confirm

hx-confirm 是 HTMX 提供的一个非常实用的属性，用于在执行 HTMX 请求前弹出确认提示框。

如果用户点击“确认”，请求继续；如果点击“取消”，请求会被阻止。

基本用法

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

参数详情

触发的事件 hx-confirm 中的明细包含以下附加属性：

• triggeredEvent：触发原始请求的事件
• issueRequest(skipConfirmation=false)：可用于确认 AJAX 请求的回调
• question： HTML 元素上 hx-confirm 的属性值

说明

• hx-confirm 可以继承并放置在父元素上
• hx-confirm 默认情况下使用浏览器window.confirm。你可以自定义此行为，如本示例 所示。
• skipConfirmation 可以将布尔值传递给 issueRequest 回调；如果为 true（默认为 false），则window.confirm不会调用并直接发出 AJAX 请求

示例

用在列表数据的删除确认中，可以直接把 hx-confirm 放在 <tbody> 中，这个每行点击删除菜单前都会弹出确认对话框。

<table>
    <thead>
        <tr>
            <th>Index</th>
            <th>Title</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody hx-confirm="Are you sure you want to delete this item?">
        <tr>
            <td>1</td>
            <td>Something1</td>
            <td><a href="#" hx-post="/test">Del</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Something2</td>
            <td><a href="#" hx-post="/test">Del</a></td>
        </tr>
    </tbody>
</table>