jQuery ajax表单提交多次 [英] jQuery ajax form submitting multiple times

问题描述

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

I am having some issues with multiple form submissions with a jquery/ajax form. I found this by printing every instance of form submission on my server, and saw that a form would submit correctly once, then again multiple times.

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

Just to be clear, this code works 100% correctly for the first submission, but when I click on another row in my table, and create a new dialog/submit it, it ends up submitting multiple times.

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

I think it has to do with event binding, but am having trouble fixing it. Any insight or help would be much appreciated.

按钮的ID是save-flag-button

The button's id is "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;
};

推荐答案

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

ajaxForm binding should be done once only. Try to put the ajaxForm binding on $(document).ready event and try to restructure your logic. ajaxForm was bind every time you click .flag element and all previously bind ajaxForm would be called on all succeeding click event.

这篇关于jQuery ajax表单提交多次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！