jQuery - e.preventDefault 难题/阻止默认后无法提交表单

Posted 2023-05-09

【中文标题】jQuery - e.preventDefault 难题/阻止默认后无法提交表单

【英文标题】：jQuery - e.preventDefault conundrum / can't submit form after preventing default

【发布时间】：2014-09-06 03:15:13

【问题描述】：

目标：停止“提交”按钮、验证字段、创建结果弹出框警报、关闭弹出框时提交表单。

所以我有一个隐藏的弹出框 div，当按下提交按钮时，我这样做是为了检查某些条件并显示弹出框：

$("form").submit(function(e) 
    e.preventDefault();
      if (($("#conditions").find("input:checkbox:checked").length ) || $('#radio_condition_1').is(":checked")) 
        $("#popback").css('display', 'block');
    
 ); 

然后我想这个代码会在弹出框被清除后提交表单：

$("#popback").click(function() 
    $("#popback").css('display', 'none');
    $("form").submit();

);

没有：

$("form").submit();

第二个代码可以很好地清除弹出框。但是，插入提交功能后，不仅不会清除弹出框，也不会提交表单。

注意：页面上有两种形式。

帮助？

【问题讨论】：

你试过e.stopPropagation()吗？

@ForeignObject 会阻止表单提交..？

您有多个表格吗？我们可以有一个最小的演示，比如jsfiddle吗？

@Tilwin Joy.. 它不应该，但它可能会阻止第一个 event 被阻止。 @NotaGuruAtAll 从submit() 中删除e.preventDefault()，看看它们是否都能正常触发。

我已经设置了一个基本的小提琴，似乎工作：jsfiddle.net/6F2zU/6

【参考方案1】：

以下应该这样做：

$('form')[0].submit();

您拥有的$('form').submit() 触发了提交事件，从而再次触发提交处理程序，这反过来又阻止了默认表单提交，您又回到了开始的地方！

CONCEPT VERIFICATION

第 1 步：加载上面的演示，您会在控制台中看到 submit event triggered。

第 2 步： 现在取消注释 $('form')[0].submit() 并注释掉 $('form').submit() 并单击 run 和 viola .. 表单已提交 .. 绕过 submit 事件处理程序。

结论： ...见上文。

更新

如果页面上有多个表单，则可以调整上面的代码以定位相关表单。例如，提交页面上的第一个表单：

$('form').first()[0].submit();

或者简单地使用任何选择器，例如 ID 或 css，提供特定级别的需求。

【讨论】：

这只是触发已经被阻止的submit 事件，而[0].submit() 提交表单 - 默认操作。

请注意，该帖子不使用event.preventDefault() 作为OP。

有趣，如果我先使用原生提交，然后切换回 jquery ，那么它可以工作，否则没有乐趣jsfiddle.net/kS3ms/1

在得出任何结论之前，您必须先看看我的演示。该演示向您展示了我一直在说的内容，并且毫无疑问。当我第一次遇到它时，这也是一个让我感到惊讶的事实:)