Jquery 使用“时多次提交的表格”；提交；回调和$.ajax来发布它

我观察到以下代码出现了一些奇怪的行为：

$.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请求

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

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

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

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

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

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

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

因此，.submit回调似乎一次又一次地附加在每个请求之后，但是为什么呢

是否可以使用.html（）将原始表单保留为幽灵或其他形式

谢谢

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

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

---

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

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

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

---

这将删除以前的绑定，只保留新的绑定。

是的，我同意Seb的观点，在我看来，在绑定之前总是解除绑定是一种很好的做法，除非您确定当前没有绑定到您想要的元素。只需使用“.submit”、“.click”、“.mouseover”等，您就可以在意外情况下双重绑定您的资料。。。功能

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

。。。而不是：

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

---

解绑对我不起作用。这确实：

$(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（）；并且您的表单将以常规方式提交。

请记住，jQuery submit（）事件将查找：

---

，或表单（）中的

。一些框架将type属性默认为“submit”，因此如果您试图覆盖默认值，请将type属性更改为其他属性，这样它就不会多次提交。

OpenCart双重提交是因为

common.js

中存在提交绑定

通过对不匹配

“表单-”

的表单使用id模式来避免这种情况

---

示例：

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

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

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

更简单的是：

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

---

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

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

---

我忘了提到我也试过了，但奇怪的是，这不起作用，因为这样新表单就不会有AJAX行为，甚至我会用脚本重新绑定它…+1我可以在这里使用这个解决方案：我尝试了这个，但在我的例子中有表单的提交，但是如果我更新表单内容，并重新提交，提交会发送origi如果我不这样做，我会提交增量表单（1、2、3等）。因为我重新绑定了“提交”按钮和“提交”操作，我的表单每次都会发送4次单击。讨厌的东西。完美的解决方案，但我很难量化我要查找的内容，从而找到此页面。谢谢，节省我的一天！；））这是一个很好的解决方案。谢谢，你节省了我的时间。这项工作对我来说非常出色，我会采取这种做法，汉克斯-这正是我所需要的这是迄今为止最容易解决的方法

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