什麼會導致一個Ajax請求從一個jQuery的對話按鈕

Question

觸發多次我有一個創建下面的HTML的局部視圖：

<div id="tabs-3" style="display: block;"> 
    <div id="My_List"> 
    </div> 
    <button id="create-log" role="button"> Create new Comment </button> 
    <div id="dialog-log"> 
     <input type="hidden" value="6265" id="My_ID"/> 
     <div><label>Title</label><input id="My_Title" type="text" value=""/></div> 
     <div><label>Message</label><textarea id="My_Message">...</textarea></div> 
    </div> 
</div>  

局部視圖還呈現以下腳本塊只包含HTML下方。

<script> 

$(function() { 

    $("#dialog-log").dialog({ 
     autoOpen: false, modal: true, height: "auto", width: "auto", title: "Add Comments to the Log", 
     position: { my: "center top", at: "center top", of: window }, 
     buttons: { 

      "Create Comment": function() { UTIL.CreateComment($("#My_ID").val(), $('#My_Title').val(), $('#My_Message').val(), $(this)); }, 
      Cancel: function() { $(this).dialog("close"); } 
     } 
    }); 
    $("#create-log").button().click(function() { 
     $("#dialog-log").dialog("open"); 
    }); 


}); 

</script> 

佈局視圖包含一個Utility.js文件。它聲明瞭一個腳本文字，用於在對話框的「創建註釋」單擊事件中促進ajax調用。

var UTIL = { 

HandleAjaxError : function (jqxhr, textStatus, errorThrown, fn) { 
    switch (textStatus) { 
     case "timeout": alert(fn + "\n\nStatus:server timeout"); break; 
     case "error": alert(fn + "\n\nStatus:general error \nError Thrown:" + errorThrown); alert("object status: " + jqxhr.status + "\nresponse text \n>>>\n" + jqxhr.responseText + "\n<<<\n"); break; 
     case "abort": alert(fn + "\n\nStatus:abort"); break; 
     case "parsererror": alert(fn + "\n\nStatus:parsererror \nError Thrown:" + errorThrown); alert(jqxhr.responseText); break; 
    } 
    //alert(jqxhr.responseText); 

}, 
CreateComment: function ($Id, $Title, $Message, $dlg) { 

    var mydata = "ID=" + $Id + "&Title=" + $Title + "&Message=" + $Message; 

    var jqxhr = $.ajax({ url: "/Log/Create/", type: "POST", dataType: "html", data: mydata 

    }).done(
    function (returnhtml) { 
     $('#My_List').html(returnhtml); 
     $('#My_Title, #My_Message').val(""); 
     $dlg.dialog("close"); 

    }).fail(function (jqxhr, textStatus, errorThrown) { UTIL.HandleAjaxError(jqxhr, textStatus, errorThrown); }) 

} 
} 

那麼在瀏覽器中的情況是，有時 - 對於我無法解釋原因 - 多個Ajax調用，當用戶點擊對話框所創建的「創建註釋」按鈕激活。這是隨機發生的，但經常......足以讓我擔心。

更重要的是，通過Ajax調用重複次數不同 - 有時是3-5和其他時候它是11-15 ...

我的問題是更多的相關技術，因爲我不能複製的行爲無論如何，儘管它在生產環境中定期發生。

我需要10美譽張貼的截圖...

Answer 1

正如指出的凱文B中的問題可能僅僅是人們保持按下按鈕。

按下按鈕後應該包含一個「發送」選項，然後將其禁用。

這可以通過多種方式來實現，但最簡單的就是設置一個標誌：

CreateComment: function ($Id, $Title, $Message, $dlg) { 
    // avoid multi-sending 
    if($dlg.data().sending) 
    return; 
    $dlg.data().sending = true; 

    var jqxhr = $.ajax({ url: "/Log/Create/", type: "POST", dataType: "html", data: mydata 

    }).done(
    function (returnhtml) { 
     // reset sending flag so in when opening the dialog again, another comment can be sent 
     $dlg.data().sending = false; 
     $('#My_List').html(returnhtml); 
     $('#My_Title, #My_Message').val(""); 
     $dlg.dialog("close"); 

    }).fail(function (jqxhr, textStatus, errorThrown) { 
     $dlg.data().sending = false; 
... 

這樣，它檢查是否對話框已經發送數據並不會運行，直到該數據實際發送（在完成/失敗變量重置）

這應該照顧瀏覽器錯誤或多點擊。