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

您第一次点击 "Add Documents" 按钮时，网页只会调用一次正确的 url。第二次单击按钮而不重新加载页面时，它会提交 2 次。第三次，3次等等...

我尝试使用我在其他答案中找到的 .unbind("submit") 方法，但由于我不明白它的作用，所以我不太确定将它放在哪里，甚至不确定它是否是正确的解决方案。

我已将所有内容都放在 fiddle 中供您阅读。

欢迎大家帮忙。

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() 代替

HTML jQuery 每点击一次提交，表单提交的次数越来越多

HTML jQuery form submits more and more times each time you click submit once

html

javascript

forms

jquery

form-submit