Форма, представленная несколько раз при использовании обратного вызова "отправить" и $.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 на форме (-ах), он отключит его обычный submit и затем выполнит запрос POST AJAX.

Странная вещь заключается в том, что форма отправляется несколько раз, так как будет отображаться предупреждение "disabled". Как вы можете видеть, я предотвращаю это, используя "переменную", сохраненную на объекте формы, и проверяя эту переменную, чтобы увидеть, была ли форма уже отправлена.

При дальнейшем тестировании кажется, что виновником является script, возвращаемый вызовом AJAX. Позвольте мне немного пояснить, что я делаю, чтобы это было более ясно.

Форма отправляется на сервер и возвращается script. script показывает форму снова, но на этот раз с сообщениями об ошибках для некоторых полей. Обратите внимание, что форма полностью заменена.

script при показе новой формы выполняет следующее:

$('.submit_to_remote').submit_to_remote();

Я должен сделать это, потому что иначе, когда вы снова нажимаете кнопку отправки, форма отправляется нормально, нет AJAX.

Итак, скажем, пользователь отправляет форму и возвращается с соответствующими ошибками (предупреждение "disabled" не отображается). Затем он подает его снова; на этот раз предупреждение "отключено" отображается один раз. Теперь он отправляет его еще раз, и на этот раз предупреждение отображается дважды! И так далее...

Итак, кажется, что обратный вызов .submit добавляется снова и снова с каждым запросом, но почему?

Может быть, с помощью .html() исходная форма хранится как призрак или что-то еще?

Спасибо!

PS: В случае, если это имеет значение, здесь script, возвращаемый вызовом $.ajax:

replace_content_with = 'the form and other stuff here';
$('.page-content').html(replace_content_with);
$('.submit_to_remote').submit_to_remote();

Ответы

Ответ 1

Да, я согласен с Seb, это хорошая практика, на мой взгляд, всегда отвязывать перед привязкой, если вы не уверены, что в настоящее время нет привязки к вашему элементу, который вы хотите. Вы можете дважды привязать свой материал к аварии, просто используя функции ".submit", ".click", ".mouseover" и т.д.

Приходите в привычку делать это (никогда не сбивает меня):

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

... вместо:

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

Ответ 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(), и ваша форма будет отправлена ​​обычным способом.

Ответ 3

Не уверен в этом странном поведении, но кажется, что отключение события отправки сделает трюк.

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

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

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

Ответ 4

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

Ответ 5

Еще проще:

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

Ответ 6

OpenCart double submit происходит потому, что существует привязка submit в common.js.

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

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

Ответ 7

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

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

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

Ответ 8

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

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