如何避免按下回车键时删除动态生成的表单行？

问题根源在于：浏览器默认会把表单内输入框按下回车键的行为，触发表单内第一个可点击按钮（比如你的删除按钮）的点击事件，或者事件冒泡后被body上的委托事件捕获执行。

给你几个直接有效的解决办法：

方法1：阻止输入框的回车默认行为 #

给动态生成的输入框绑定keydown事件，按下回车键时阻止默认行为和事件冒泡，避免触发按钮的点击：

// 阻止输入框回车触发默认行为
$("body").on("keydown", ".form_field_outer_row input", function(e) {
    if (e.keyCode === 13 || e.key === 'Enter') {
        e.preventDefault(); // 阻止浏览器默认提交行为
        e.stopPropagation(); // 阻止事件冒泡到body
        // 可选：如果需要回车切换到下一个输入框，在这里写逻辑
        // $(this).closest('.form_field_outer_row').next().find('input').focus();
    }
});

方法2：修改删除按钮的类型 #

如果你的删除按钮是<button>标签，默认类型是submit，浏览器会把它当成表单的提交按钮，回车时触发。改成button类型就能避免：

<!-- 原来的按钮 -->
<button class="remove_node_btn_frm_field">删除</button>
<!-- 修改后 -->
<button type="button" class="remove_node_btn_frm_field">删除</button>

方法3：在删除事件里判断触发方式 #

确保只有鼠标点击或触摸触发时才执行删除，排除键盘触发的情况：

$("body").on("click", ".remove_node_btn_frm_field", function (e) {
    // 只处理鼠标点击或触摸事件，排除键盘触发
    if (e.type === 'click' && !e.isTrigger) {
        $(this).closest(".form_field_outer_row").remove();
    }
});

推荐优先用方法2+方法1组合，既能从根源避免按钮被误触，又能防止输入框回车带来的其他默认行为。

内容的提问来源于stack exchange，提问作者usman610