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

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

更简单的是：

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