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请求。

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

经过进一步测试，似乎罪魁祸首是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();

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

Unbind对我不起作用。这样做了：

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

在这种情况下，如果您输入的是'错误名称'，则表单将不会被提交，之后，当您输入“正确名称”时，$（文档）.on（'submit'..将不会被触发，e.preventDefault（）;和表格都不会以常规方式提交。

Answer 3

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

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

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

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

Answer 4

更容易：

ggplot(df, aes(x = timeseq, y = data)) +
    stat_summary(fun.y = sum, geom = "line") +
    scale_x_date(labels = date_format("%Y-%m-%d"),
                 breaks = "1 week")

Answer 5

请记住，jQuery submit（）事件会查找：形式为<input type="submit">, <input type="image">, or <button type="submit">的{{1}}。有些框架将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();
});

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

8 个答案: