表单在使用“提交”回调和$时多次提交。ajax发布它

I've been observing some strange behavior with the following code:

我一直在观察一些奇怪的行为:

$.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();

So, basically, upon calling submit_to_remote on a form(s), it will disable it's normal submit and then make an AJAX POST request.

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

The strange thing is that the form gets posted multiple times, as the 'disabled' alert will show. As you can see, I'm preventing this by using a "variable" saved on the form object, and checking that variable to see if the form has already been submitted.

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

Upon further testing, it seems that the culprit is the script returned by the AJAX call. Let me explain a bit what I'm doing so it's more clear.

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

The form gets posted to the server, and a script returned. The script shows the form again, but this time with error messages for some fields. Note that the form is completely replaced.

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

The script, upon showing the new form, executes this:

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

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

I have to do that because otherwise, when you click on the submit button again, the form is submitted normally, no AJAX.

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

So, say a user submits the form and it's returned back with the appropriate errors (the 'disabled' alert is not shown). Then he submits it again; this time the 'disabled' alert is shown once. Now he submits it one more time, and this time the alert is shown twice! And so on...

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

So it would seem that the .submit callback is being appended again and again with each request, but why?

因此，似乎.submit回调在每个请求中都被一次又一次地追加，但是为什么呢?

Could it be that by using .html() the original form is kept as a ghost or something?

是否可以通过使用.html()将原始表单保存为ghost或其他形式?

Thanks!

谢谢!

PS: In case it's relevant, here's the script returned by the $.ajax call:

PS:如果是相关的，这是$返回的脚本。ajax调用:

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

8 个解决方案

#1

Yes, I agree with Seb, it's a good practice, in my opinion to always unbind before binding unless you are certain that there aren't currently binds to your element that you want. You can double bind your stuff on accident by simply using the '.submit', '.click', '.mouseover', etc... functions.

是的，我同意Seb，这是一个很好的实践，在我看来，在绑定之前总是解绑定，除非您确定当前没有绑定到您想要的元素。您可以通过简单地使用“”来将您的东西加倍绑定。提交”、“。点击“,”。鼠标移至”,等等……功能。

Get into the habit of doing this (never fails for me):

养成这样做的习惯(我从来没有失败过):

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

... instead of:

…而不是:

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

#2

Unbind didn't work for me. This did:

Unbind不适合我。这是:

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

I hope it helps...

我希望它可以帮助……

In fact unbind() can bring you some troubles if you have some validation and return before submit. Example:

实际上，如果您在提交之前进行了一些验证并返回，那么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
});

In this case if you input is 'wrong name' the form will not be submitted and after that, when you put the "right name", the $(document).on('submit'.. will not be triggered, neither the e.preventDefault(); and your form will be submitted in the regular way .

在这种情况下，如果您输入的是“错误的名称”，那么表单将不会被提交，之后，当您输入“正确的名称”时，$(文档)。不会被触发，也不会被触发。你的表格将按常规方式提交。

#3

Not sure about this strange behavior, but seems that unbinding the submit event will do the trick.

不确定这个奇怪的行为，但似乎解绑定提交事件就能达到这个目的。

So, before running the script returned by the $.ajax call, run this:

因此，在运行$之前返回的脚本之前。ajax调用,运行:

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

That should remove previous bindings and leave just the new one.

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

#4

Keep in mind that the jQuery submit() event looks for: <input type="submit">, <input type="image">, or <button type="submit"> in the form (http://api.jquery.com/submit/). Some frameworks default the type attribute to "submit", so if you are trying to override the default, change the type attribute to something else so it doesn't submit multiple times.

请记住，jQuery submit()事件会查找:，，或

#5

Easier yet is:

简单的是:

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

#6

OpenCart double submit happens because there is a submit bind in common.js.

发生OpenCart双重提交是因为在common.js中有一个submit bind。

Avoid this by using an id pattern for the form that does not match "form-".

通过为不匹配“表单-”的表单使用id模式来避免这种情况。

Example: <form id="myform" >.

例如:id = " myform " > <形式。< p>

#7

you can use this code to resolve :

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

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

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

#8

I had the same problem and fixed like below using click.

我遇到了同样的问题，使用click修复如下。

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

#1