Javascript 什么会导致ajax请求从jQuery对话框按钮多次触发

我有一个创建以下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>

$（函数（）{
$（“#对话框日志”）.dialog({
自动打开：假，模态：真，高度：“自动”，宽度：“自动”，标题：“向日志添加注释”，
位置：{my:“中心顶部”，在“中心顶部”，of:window}，
按钮：{
“创建注释”：函数（）{UTIL.CreateComment（$（“#我的ID”）.val（），$（“#我的标题”）.val（），$（“#我的消息”）.val（），$（this））；}，
取消：函数（）{$（this）.dialog（“close”）；}
}
});
$（“#创建日志”）。按钮（）。单击（函数（）{
$（“#对话框日志”）。对话框（“打开”）；
});
});

布局视图包含一个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); })

}
}

var UTIL={
handleaXError：函数（jqxhr、textStatus、errorshown、fn）{
开关（文本状态）{
案例“超时”：警报（fn+“\n\n状态：服务器超时”）；中断；
案例“错误”：警报（fn+”\n\n状态：一般错误\n抛出：“+errorhorn”）；警报（“对象状态：+jqxhr.status+”\n响应文本\n>>>\n“+jqxhr.responseText+”\n正如Kevin 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;
...

通过这种方式，它检查对话框是否已经发送数据，并且在实际发送数据之前不会运行（在完成/失败时，重置变量）

这应该可以解决浏览器错误或多次单击问题。
我在您的代码中没有看到任何会导致多次单击的内容。请尝试缩小范围。抱歉，如果我完全失明，但我看不到“创建注释”“button..另外-是否每次弹出窗口出现时都会创建该按钮？是否每次弹出窗口出现时都会绑定该事件？可能会有多个单击事件添加到“创建注释”按钮。@JFit它是一个对话框按钮：
“创建注释”：函数（）{UTIL.CreateComment
，因此它不会被多次生成或绑定。“我的问题更多地与技术相关，因为我无法以任何方式复制该行为，尽管它会在生产环境中定期发生。”试着运行IE8标准并快速点击。我猜这只是一个不耐烦的用户垃圾邮件点击的例子。一种阻止它的方法是在发送ajax请求之前而不是之后关闭对话框。嗨，Kevin，我的直觉告诉了创建对话窗口（并创建按钮）的内部jQuery函数将此函数绑定到单击事件“n”的次数…但我无法知道或测试是否确实发生了这种情况。更奇怪的是，当我关闭对话框时（没有重新加载页面）再次打开它，ajax调用只触发了一次…我还缺少什么？非常感谢！我最终通过脚本文本中的属性设置了标志，而不是利用对话框的数据（）因为我对操纵DOM来打开和关闭对话框的函数有点偏执。但真的很感谢你的建议。这让我发疯了。