HTMX表单未触发hx-post请求仍执行传统提交的问题求助

大家好，我最近在做一个卡片的在线编辑功能，用HTMX来实现交互，结果碰到个棘手的问题，想请各位帮忙看看：

我做的逻辑是，用户点击卡片上的编辑按钮后，用JS把卡片内容替换成HTML <template> 里存的<form>表单。但现在的问题是，这个表单提交的时候，本该触发hx-post请求，结果却走了传统的表单提交流程，直接跳转页面了。

我已经尝试了几种办法，但都没解决：

• 新建了一个空白页面复现这个场景，把form.submit()换成form.requestSubmit()之后，就能正常触发HTMX的请求了，但把同样的修改放到实际项目页面里，却完全没效果
• 把原来用作确认提交的svg图标换成了标准的<button type="submit">按钮，并且把这个按钮放到了<form>标签内部，问题还是存在

以下是相关的代码片段：

<div class="profileCard" id="personalData">
    <div>
        <h1>Personal Details</h1>
        <!-- edit button: -->
        <svg class="editBtn pdEdit" width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- 省略svg内部的路径代码 -->
        </svg>
    </div>
    <!-- 卡片展示的个人信息内容 -->
</div>

<!-- 对应的表单模板 -->
<template id="personalDataForm">
    <form id="pdForm" hx-post="/updatePersonalData" hx-target="#personalData" hx-swap="outerHTML">
        <!-- 表单输入字段省略 -->
    </form>
</template>

有没有朋友碰到过类似的问题？或者能帮我分析下可能的原因吗？

备注：内容来源于stack exchange，提问作者Prakhar Pandey