Javascript jQuery ajax表单多次提交

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

需要明确的是，此代码在第一次提交时100%正确，但当我单击表中的另一行并创建一个新对话框/提交它时，它会多次提交

我认为这与事件绑定有关，但我在修复它时遇到了麻烦。如有任何见解或帮助，将不胜感激

按钮的id为“保存标志按钮”

//当有人单击“我的表”中的“标志”列时，会弹出一个对话框//
//在标志不存在的条件下//
$（函数（）{
$（'.flag'）。单击（函数（）{
var cellId=“flag”+字符串（this.getAttribute（“数据客户端rel”）；
if（此.getAttribute（“数据标志存在”）=“0”）{
//创建对话框
var dialog=flagDialog（“创建标志”）；
//使表单成为ajax
$（“表单”，对话框）.ajaxForm（函数（成功，数据）{
如果（成功）{
$（“#”+cellId）.attr（“数据标志存在”，“1”）；
$（“#”+cellId）.attr（“数据标志内容”，数据[“标志状态]）；
$（“#”+cellId）.text（数据[“旗国]）；
$（“#标志对话框”）。对话框（“关闭”）；
}否则{
警报（“未能提交标志。请重试”）；
}
});
}else{}
}).hover（函数（）{
if（此.getAttribute（“数据标志存在”）=“0”）{
this.innerHTML='Create flag！'；
}}，函数（）{
this.innerHTML=this.getAttribute（“数据标志内容”）；
})
});
//jquery对话框代码//
函数flagDialog（dialogTitle）{
var对话框=$（“#标志对话框”）。对话框({
自动打开：错误，
自动调整大小：正确，
莫代尔：是的，
身高：300，
最小宽度：450，
位置：“中心”，
标题：dialogTitle，
按钮：[{
id:“标记取消按钮”，
文本：“取消”，
单击：函数（）{
$（此）.dialog（“关闭”）；
}
},
{
id:“保存标志按钮”，
文本：“提交”，
单击：函数（）{
$（“#标志对话框”）。对话框（“销毁”）；
//$（“#客户关系标志表”）.submit（）；
}
}],
关闭：函数（）{
//$（“#注释文本”）。文本（“”）；
}
});
//解开这里的按钮//
$（“#保存标志按钮，#标志取消按钮”）.unbind（）；
$（“#保存标志按钮”）。解除绑定（'click'）。单击（函数（）{
$（“#客户关系标志表”）.submit（）；
});
$（“#标记取消按钮”）。单击（函数（）{
$（“#标志对话框”）。对话框（“关闭”）；
});
dialog.dialog（“打开”）；
返回对话框；
};

ajaxForm绑定只能执行一次。

---

尝试将ajaxForm绑定放在$（document）.ready事件上，并尝试重新构造逻辑。每次单击时，ajaxForm都会被绑定。flag元素，所有之前绑定的ajaxForm都会在所有后续的单击事件中被调用。

我们可以看到一些HTML代码来支持jQuery吗？只要一个样品就够了。

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