使用“提交”回调和 $.ajax 发布时多次提交的表单

Question

我一直在使用以下代码观察一些奇怪的行为：

$.fn.submit_to_remote = function() {
  // I use .each instead of the .submit directly so I can save
  // the 'submitEnabled' variable separately for each form
  jQuery.each($(this), function() {
    $(this).submit(function() {
      form = $(this);
      if (form.data('submitEnabled') == false) { alert('disabled'); return false; }
      form.data('submitEnabled', false);
      $.ajax({type: 'POST', url: 'url', data: data, dataType: 'script',
        success: function(script) {
          alert('success')
        }
      })
      return false;
    })
  })
}
$('.submit_to_remote').submit_to_remote();

因此，基本上，在表单上调用 submit_to_remote 时，它将禁用它的正常提交，然后发出 AJAX POST 请求。

奇怪的是，表单被多次发布，因为“禁用”警报会显示。 如您所见，我通过使用保存在表格 object 上的“变量”来防止这种情况发生，并检查该变量以查看表格是否已提交。

经过进一步测试，罪魁祸首似乎是 AJAX 调用返回的脚本。 让我解释一下我在做什么，这样会更清楚。

表单被发布到服务器，并返回一个脚本。 该脚本再次显示表单，但这次显示某些字段的错误消息。 请注意，该表单已完全替换。

该脚本在显示新表单后执行以下操作：

$('.submit_to_remote').submit_to_remote();

我必须这样做，否则，当您再次单击提交按钮时，表单会正常提交，没有 AJAX。

因此，假设用户提交表单并返回相应的错误（未显示“禁用”警报）。 然后他再次提交； 这次“禁用”警报显示一次。 现在他又提交了一次，这次警报显示了两次。 等等...

因此，似乎每次请求都会一次又一次地附加 .submit 回调，但为什么呢？

难道是通过 using.html() 原始表单被保留为幽灵或其他东西？

谢谢！

PS：如果相关，这里是 $.ajax 调用返回的脚本：

replace_content_with = 'the form and other stuff here';
$('.page-content').html(replace_content_with);
$('.submit_to_remote').submit_to_remote();

Answer 1

是的，我同意 Seb，这是一个很好的做法，我认为在绑定之前始终取消绑定，除非您确定当前没有您想要的元素绑定。 您可以通过简单地使用“.submit”、“.click”、“.mouseover”等功能来双重绑定您的东西。

养成这样做的习惯（对我来说永远不会失败）：

$('.some_element').unbind('submit').bind('submit',function() {
    // do stuff here...
});

... 代替：

$('.some_element').submit(function() {
    // do stuff here...
});

Answer 2

解除绑定对我不起作用。 这做到了：

$(document).off('submit');
$(document).on('submit',"#element_id",function(e){
    e.preventDefault();
    //do something
}); 

我希望它有帮助...

实际上 unbind() 如果在提交之前进行一些验证和返回，可能会给您带来一些麻烦。 例子：

$(document).on('submit',"#element_id",function(e){
    e.preventDefault();
    $(document).unbind('submit');
    var name = $(this).children('input[name="name"]').val();
    if( name == 'wrong name')
        return;

    //do something
});

在这种情况下，如果您输入的是“错误名称”，则不会提交表单，之后，当您输入“正确名称”时，不会触发 $(document).on('submit'..，也不会触发e.preventDefault(); 并且您的表单将以常规方式提交。

Answer 3

不确定这种奇怪的行为，但似乎取消绑定提交事件就可以了。

因此，在运行 $.ajax 调用返回的脚本之前，运行以下命令：

$('.submit_to_remote').unbind("submit");

那应该删除以前的绑定，只留下新的绑定。

Answer 4

更简单的是：

$(".some-class").off().submit(function() {
    //Do stuff here
});

Answer 5

请记住， <input type="submit">, <input type="image">, or <button type="submit"> submit() 事件在表单 ( http://api. jquery.com/submit/ )。 一些框架默认 type 属性为“submit”，因此如果您试图覆盖默认值，请将 type 属性更改为其他属性，这样它就不会多次提交。

Answer 6

发生 OpenCart 双重提交是因为common.js中有一个提交绑定。

通过对与"form-"不匹配的表单使用 id 模式来避免这种情况。

示例： <form id="myform" > 。

Answer 7

您可以使用此代码来解决：

$(this).submit(function() {
.
.
.
});

$(this).unbind("submit");

Answer 8

我有同样的问题，并使用点击修复如下。

 $('.submit_to_remote').on('click', function(){
//Some validation or other stuff
$(this).submit();
});