jquery – 在使用“submit”回调和$.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();

我必须这样做，否则，当你再次点击提交按钮时，表单正常提交，没有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();

解决方法

是的，我同意Seb，这是一个很好的做法，在我看来，在绑定之前总是解除绑定，除非你确定目前没有绑定你想要的元素。您可以通过简单地使用“.submit”，“.click”，“.mouSEOver”等功能来双重绑定您的东西。

习惯这样做(永远不会为我失败)：

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

… 代替：

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

原文链接：https://www.f2er.com/jquery/182139.html

jquery – 在使用“submit”回调和$.ajax发布时多次提交表单

解决方法

猜你在找的jQuery相关文章