Форма отправляется несколько раз при использовании обратного вызова submit и $ .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

Да, я согласен с Себом, это хорошая практика, по моему мнению, всегда снимать привязку перед привязкой, если вы не уверены, что в данный момент нет привязок к вашему элементу, которые вы хотите. Вы можете дважды связать свои вещи в случайном порядке, просто используя функции «.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
});

В этом случае, если вы введете «неправильное имя», форма не будет отправлена, и после этого, когда вы введете «правильное имя», $ (document) .on ('submit' ..) не сработает ни e.preventDefault (), ни ваша форма не будут отправляться обычным способом.

Answer 3

Не уверен насчет этого странного поведения, но похоже, что отмена привязки события submit поможет.

Итак, перед запуском скрипта, возвращенного вызовом $ .ajax, запустите:

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

Это должно удалить предыдущие привязки и оставить только новую.

Answer 4

Еще проще:

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

Answer 5

Имейте в виду, что событие submit () jQuery ищет: <input type="submit">, <input type="image">, or <button type="submit"> в форме (http://api.jquery.com/submit/). В некоторых платформах атрибут type по умолчанию атрибут «submit», поэтому, если вы пытаетесь переопределить значение по умолчанию, измените атрибут type на что-то другое, чтобы он не отправлялся несколько раз.

Answer 6

У меня была та же проблема, и я ее исправил, как показано ниже.

 $('.submit_to_remote').on('click', function(){
//Some validation or other stuff
$(this).submit();
});

Answer 7

Вы можете использовать этот код для разрешения:

$(this).submit(function() {
.
.
.
});

$(this).unbind("submit");

Answer 8

Двойная отправка OpenCart происходит из-за привязки отправки в common.js.

Избегайте этого, используя шаблон идентификатора для формы, которая не соответствует "form-".

Пример: <form id="myform" >.