
当页面中动态生成的表单行包含默认 type 的按钮时,按 Enter 键会意外触发删除操作——这是因为 默认 type 为 submit,在表单上下文中会响应回车事件;解决方法是显式声明 type="button"。
当页面中动态生成的表单行包含默认 type 的按钮时,按 enter 键会意外触发删除操作——这是因为 `
在 Web 表单开发中,尤其是涉及动态增删字段(如多组输入框、自定义表单项)的场景下,一个常见却容易被忽视的问题是:点击“删除”按钮可正常移除对应行,但用户在任意输入框内按下 Enter 键时,也会意外触发该删除逻辑。这并非 JavaScript 事件监听本身有误,而是 HTML 按钮元素的默认行为所致。
根本原因:
根据 HTML 规范,未显式指定 type 属性的
- 点击按钮会提交表单;
- 在表单内任意可编辑控件(如 、——进而激活最近的 submit 类型按钮的点击事件(即使焦点不在按钮上)。
由于你的事件委托绑定在 body 上,并监听所有 .remove_node_btn_frm_field 按钮的 click 事件,而该按钮恰好位于表单内,Enter 键引发的“模拟点击”会被捕获,最终执行 $(this).closest(".form_field_outer_row").remove(),导致误删。
正确解决方案:显式设置 type="button"
只需确保所有用于 UI 交互(非表单提交)的按钮都明确声明 type="button":
立即学习“Java免费学习笔记(深入)”;
<!-- ✅ 正确:禁用表单提交行为 --> <button type="button" class="remove_node_btn_frm_field">删除</button> <!-- ❌ 错误:默认 type="submit",易引发 Enter 误触发 --> <button class="remove_node_btn_frm_field">删除</button>
即使按钮位于










