
当页面中动态生成的删除按钮未显式设置 `type="button"` 时,其默认类型为 `submit`,会触发表单提交或冒泡至父表单,导致回车键意外触发删除行为;解决方法是为按钮明确声明 `type="button"`。
在 Web 表单开发中,尤其是处理动态增删字段(如多组输入框)时,一个常见但容易被忽视的问题是:点击“删除”按钮可正常移除对应行,但当用户在输入框中编辑内容并按 Enter 键时,该行也被意外删除。根本原因在于 HTML 中
你的当前 JS 代码:
$("body").on("click", ".remove_node_btn_frm_field", function () {
$(this).closest(".form_field_outer_row").remove();
});完全正确,问题不出在 JavaScript,而出在 HTML 按钮语义层面。
✅ 正确写法(务必显式声明 type="button"):
立即学习“Java免费学习笔记(深入)”;
❌ 错误写法(隐式 type="submit",存在风险):
⚠️ 补充注意事项:
- 即使按钮未包裹在
- 若该按钮确实位于
- 动态生成的按钮(如通过 JS 拼接字符串或模板引擎渲染),务必在生成时就写入 type="button",避免依赖后续 JS 修正。
? 总结:这不是 JavaScript 事件监听逻辑的问题,而是 HTML 按钮语义规范的实践问题。始终为非提交用途的按钮显式设置 type="button",是防御性前端开发的重要习惯,能彻底杜绝 Enter 键误触发删除、保存等副作用操作。










