HTML-форма jQuery отправляется все больше и больше раз при каждом нажатии кнопки «Отправить» один раз.

Question

Название вопроса не совсем понятно.

Ниже приведен HTML

 <button id="btn-documents-add">Add Documents</button>
 <div id="documents-form" title="Upload Document" style="display:none;">
   <form id="form-documents" action="/documents/save_document" method="post" encType="multipart/form-data">
     <input type="file" id="document" name="document" /><br>
     <input type="submit" value="Upload !" /><br>
   </form>
 </div>

и javascript (при условии, что загружены jQuery и jQueryUI)

var openDialogDocuments = () => {
  let documentsDialog;
  documentsDialog = $("#documents-form").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      Cancel: function() {
        documentsDialog.dialog("close");
      }
    },
    close: () => {},
  });
  documentsDialog.unbind("submit");
  documentsDialog.find("form").on("submit", (event) => {
    event.preventDefault();
    let xhr = $("#form-documents").ajaxSubmit().data("jqxhr");
    xhr.done((response, status, xhr) => {
      $("#messages-documents").html(response);
    });
    xhr.fail((err) => {
      $("#messages-documents").html(err.responseText);
    });
    xhr.always((xhr, status) => {
      $("#documents-form").dialog("close");
    });
  });
  documentsDialog.dialog("open");
};
$(function() {
  $("#btn-documents-add")
    .button()
    .click(openDialogDocuments);
});

При первом нажатии на кнопку «Добавить документы» веб-страница выполняет только один вызов правильного URL-адреса. Второй раз, когда вы нажимаете на кнопку, не перезагружая страницу, она отправляет ее 2 раза. В третий раз, 3 раза и так далее ...

Я пытался поиграться с методом .unbind("submit"), который я нашел в других ответах, но так как я не понимаю, что он делает, я не совсем уверен, гдескажи это или даже если это правильное решение.

Я положил все в эту скрипку для твоего ознакомления.

Добро пожаловать всем.

Answer 1

Вы отменяете привязку не к тому элементу, когда делаете

documentsDialog.unbind("submit");

Вам необходимо удалить слушателя из формы внутри documentsDialog

Изменить:

documentsDialog.unbind("submit");
documentsDialog.find("form").on("submit", (event) => {

К

documentsDialog.find("form").off('submit').on("submit", (event) => {
                           // ^^ remove any previous listener 
                           //    before adding new one

Обратите внимание, что unbind() устарела, поэтому мы используем off() вместо