当表单内同时存在提交按钮和测试按钮时，若两者均为 ，点击测试按钮会先触发 click 事件，再冒泡触发 submit 事件，导致两个 AJAX 请求并发执行，造成 DOM 意外更新或逻辑混乱。

当表单内同时存在提交按钮和测试按钮时，若两者均为 ``，点击测试按钮会先触发 `click` 事件，再冒泡触发 `submit` 事件，导致两个 ajax 请求并发执行，造成 dom 意外更新或逻辑混乱。

根本原因在于：#test-template 按钮被错误地定义为 submit 类型。即使你为其绑定了 click 事件，只要它位于

内且 type="submit"（或未显式声明 type，浏览器默认为 submit），点击它就会触发表单原生提交行为，进而激活 $("#template_informations").submit(...) 监听器——这与你的 click 处理逻辑完全无关，却必然并行发生。

✅ 正确解决方案有两种，推荐优先采用第二种（语义更清晰、无副作用）：

方案一：在 click 事件中阻止默认行为（快速修复）

$(document).on("click", "#test-template", function(event) {
    event.preventDefault(); // ? 关键：阻止表单提交，切断 submit 事件触发链

    var formData = $("#template_informations").serialize();
    $.ajax({
        type: "POST",
        url: "/marketing/gpnews/template",
        data: formData,
        success: function(data) {
            var test_field = $(".test-field");
            var textoHTML = decodeEntities(data.html);

            const div = document.createElement('div');
            const parser = new DOMParser();
            const parsedHTML = parser.parseFromString(textoHTML, 'text/html');
            div.appendChild(parsedHTML.documentElement);
            test_field.html(div);
        }
    });
});

方案二：修改 HTML，使用语义正确的按钮类型（推荐）

将测试按钮从 submit 改为 button：

AJAX技术—无刷新获取数据相关课件

AJAX技术—无刷新获取数据相关课件

下载

<!-- ❌ 错误：submit 按钮会触发表单提交 -->
<!-- <button id="test-template" type="submit">Test Template</button> -->

<!-- ✅ 正确：普通按钮，仅响应 click -->
<button id="test-template" type="button">Test Template</button>

此时无需 event.preventDefault()，click 事件将独立运行，submit 事件仅由真正提交表单的操作（如回车、主提交按钮）触发。

⚠️ 注意事项：

• 不要依赖 return false 替代 event.preventDefault()：它还会阻止事件冒泡，可能影响其他监听器；
• 若表单有多个 submit 按钮，请确保仅有一个具备实际提交语义（如 id="submit-form"），其余应统一改为 type="button"；
• 建议为不同用途的按钮添加明确的 data-action 属性（如 data-action="preview"），便于未来扩展和维护。

通过明确区分「提交」与「预览/测试」的交互语义，并合理使用 HTML 表单控件类型，即可彻底避免双请求、双 success 回调的竞态问题。