表单提交多次在使用[提交＆QUOT;回调和$就以它张贴 [英] Form submitted multiple times when using the "submit" callback and $.ajax to post it

问题描述

我一直在观察一些奇怪的行为具有以下code：

  $。fn.submit_to_remote =功能（）{
  //我用，而不是.submit。每个直接这样我就可以节省
  //了submitEnabled'变量分别为每个表单
  jQuery.each（$（本），函数（）{
    $（本）.submit（函数（）{
      表= $（本）;
      如果（form.data（'submitEnabled'）== FALSE）{警报（已禁用）;返回false; }
      form.data（'submitEnabled'，假）;
      $阿贾克斯（{类型：POST，网址：URL，数据：数据，数据类型：'脚本'，
        成功：函数（脚本）{
          警报（成功）
        }
      }）
      返回false;
    }）
  }）
}
$（'。submit_to_remote）submit_to_remote（）。
 

所以，基本上，当打电话submit_to_remote形式（S）上，它将禁用它的正常提交，然后作出一个AJAX POST请求。

但奇怪的是，该表被贴多次，为禁用警报将显示。正如你所看到的，我是$ P $用一个变量保存的表单对象，并检查变量，看看是否已经提交表单pventing这一点。

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

的形式被发送到服务器，以及一个脚本返回。该脚本显示了再次的形式，但这次对某些领域的错误消息。需要注意的是形式完全取代。

脚本，在显示新的形式，执行这样的：

  $（'。submit_to_remote）submit_to_remote（）;
 

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

所以，说一个用户提交表单，它的返回回用适当的错误（禁用警报未显示）。然后，他再次提交它;这一次的禁用显示警报一次。现在，他提出一个更多的时间，而这一次的警报显示两次！等等...

因此​​，它似乎是在.submit回调被一次又一次地追加每个请求，但为什么？

难道是用的.html（）的原始形式被保存为一个幽灵什么的？

谢谢！

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

  replace_content_with ='的形式和这里其他的东西;
$（'。页面内容）HTML（replace_content_with）。
$（'。submit_to_remote）submit_to_remote（）。
 

解决方案

是的，我同意勒布，这是一个很好的做法，在我看来，在绑定，除非你确信不会有目前结合，始终解除您你想要的元素。您可以通过加倍简单地使用.submit'，'。点击'，'.mouseover绑定你的东西事故，等等功能。

获取到这样做（从来没有失败对我来说）的习惯：

  $（'。some_element）。解除（提交）。绑定（'提交'，函数（）{
    //做的东西在这里...
}）;
 

代替

...

  $（'。some_element）。递交（函数（）{
    //做的东西在这里...
}）;
 

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.

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.

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.

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?

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

Thanks!

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

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

解决方案

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.

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...
});

这篇关于表单提交多次在使用[提交＆QUOT;回调和$就以它张贴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！