Form submitted multiple times when using the "submit" callback and $.ajax to post it

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

Unbind didn't work for me. This did:

$(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:

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

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:

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

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