jQuery ajax表单提交多次

我在使用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 = 'Create flag!'; }}, 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都将在所有后续单击事件上调用。