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

您第一次点击“添加文档”按钮时，网页仅调用正确的网址。第二次单击按钮而不重新加载页面，它将提交两次。第三次，3次，等等...

[我尝试使用在其他答案中发现的.unbind("submit")方法，但由于我不了解它的用途，因此我不确定将其放在哪里或什至是正确的解决方案。

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

欢迎所有帮助。

Answer 1

您需要从表单而不是对话框中取消绑定submit事件处理程序：

documentsDialog.find("form").unbind("submit");

Answer 2

您在执行操作时会从错误的元素上解除绑定

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