여러 번 제출하는 jQuery ajax 양식

Question

jquery/ajax 양식을 사용하여 여러 양식 제출과 관련된 문제가 있습니다. 내 서버에서 양식 제출의 모든 인스턴스를 인쇄하여이 사실을 발견하고 양식이 올바르게 한 번 제출 된 다음 다시 여러 번 제출할 것을 확인했습니다.

이 코드는 첫 번째 제출시 100 % 올바르게 작동하지만 테이블의 다른 행을 클릭하고 새 대화 상자를 만들거나 제출하면 여러 번 제출됩니다.

이벤트 바인딩과 관련이 있다고 생각하지만 문제를 해결하는 데 어려움이 있습니다. 모든 통찰이나 도움이 많이 감사 할 것입니다.

버튼의 ID는 "저장 플래그 버튼을"

// 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은 한 번만 수행해야합니다 바인딩입니다. $ (document) .ready 이벤트에 ajaxForm 바인딩을 넣고 논리를 재구성 해보십시오. ajaxForm은 .flag 요소를 클릭 할 때마다 바인드되었으며 이전의 모든 바인드 ajaxForm은 모든 후속 클릭 이벤트에서 호출됩니다.