Question

我在使用jquery / ajax表单的多个表单提交时遇到了一些问题。我通过在我的服务器上打印表单提交的每个实例找到了这个，并看到一个表单将正确提交一次，然后再次多次提交。

为了清楚起见，此代码在第一次提交时100％正确工作，但当我点击表格中的另一行，并创建一个新对话框/提交时，它最终会多次提交。

我认为它与事件绑定有关，但我无法修复它。任何见解或帮助将不胜感激。

按钮的id是“save-flag-button”

// When someone clicks on the flag column in my table, a dialog pops up //
// on the condition that a flag does not exist. //
$(function() {
  $('.flag').click(function() {
    var cellId = "flag" + String(this.getAttribute("data-client-rel"));
    if (this.getAttribute("data-flag-exists") == '0') {

      // create dialog
      var dialog = flagDialog('Create Flag');

      // Making the form ajax
      $("form", dialog).ajaxForm(function(success, data) {
        if (success) {
          $("#" + cellId).attr("data-flag-exists", '1');
          $("#" + cellId).attr("data-flag-content", data["flag_state"]);
          $("#" + cellId).text(data["flag_state"]);
          $("#flag-dialog").dialog("close");
        } else {
          alert("Failed to submit flag. Please retry.");
        }
      });
    } else { }

    }).hover(function() {
      if (this.getAttribute("data-flag-exists") == '0') {
        this.innerHTML = '<span style="color: #4183C4;">Create flag!</span>';
      }}, function() {
        this.innerHTML = this.getAttribute("data-flag-content");
      })
    });

// jquery dialog code //
function flagDialog(dialogTitle) {
  var dialog = $("#flag-dialog").dialog({
    autoOpen: false,
    autoResize: true,
    modal: true,
    minHeight: 300,
    minWidth: 450,
    position: "center",
    title: dialogTitle,
    buttons: [{
      id: "flag-cancel-button",
      text: "Cancel",
      click: function() {
        $(this).dialog("close");
        }
      },
      {
      id:"save-flag-button",
      text: "Submit",
      click: function() {
        $("#flag-dialog").dialog("destroy");
        // $("#client-relationship-flag-form").submit();
        }
      }],
    close: function() {
      //$("#notes-text").text("");
    }
  });

  // Unbinding buttons here //
  $("#save-flag-button, #flag-cancel-button").unbind();
  $("#save-flag-button").unbind('click').click(function() {
    $("#client-relationship-flag-form").submit();
  });
  $("#flag-cancel-button").click(function() {
     $("#flag-dialog").dialog("close");
  });

  dialog.dialog("open");
  return dialog;
};

Answer 1

ajaxForm绑定应该只进行一次。尝试将ajaxForm绑定放在$（document）.ready事件上，并尝试重构您的逻辑。每次单击 .flag 元素时都会绑定ajaxForm，所有以前绑定的ajaxForm都会在所有后续点击事件中被调用。

jQuery ajax表单提交多次

1 个答案: