title: What would cause an ajax request to fire multiple times from a jQuery dialogue button
body: <p>I have a partial View that creates the following html:</p>
  
  <pre><code>&lt;div id="tabs-3" style="display: block;"&gt;
      &lt;div id="My_List"&gt;
      &lt;/div&gt;
      &lt;button id="create-log"  role="button"&gt; Create new Comment &lt;/button&gt;
    &lt;div id="dialog-log"&gt;
        &lt;input type="hidden" value="6265" id="My_ID"/&gt;
        &lt;div&gt;&lt;label&gt;Title&lt;/label&gt;&lt;input id="My_Title" type="text" value=""/&gt;&lt;/div&gt;
        &lt;div&gt;&lt;label&gt;Message&lt;/label&gt;&lt;textarea id="My_Message"&gt;...&lt;/textarea&gt;&lt;/div&gt;
     &lt;/div&gt; 
  &lt;/div&gt;     
  </code></pre>
  
  <p>The partial View also renders the following script block just below the html.</p>
  
  <pre><code>&lt;script&gt;
  
  $(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");
      });
  
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The layout View includes a Utility.js file. It declares a script literal that facilitates the ajax call in the dialogue's "Create Comment" click event.</p>
  
  <pre><code>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&gt;&gt;&gt;\n" + jqxhr.responseText + "\n&lt;&lt;&lt;\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 + "&amp;Title=" + $Title + "&amp;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); })
  
  }
  }
  </code></pre>
  
  <p>So what happens in the browser is that sometimes - for reasons that I cannot explain - multiple ajax calls are fired when the user clicks the "Create Comment" button created by the dialog. This occurs randomly, but frequently... enough to make me worry.</p>
  
  <p>What's more is that the number by which ajax calls are repeated varies - sometimes it's 3-5 and other times it's 11-15 ...</p>
  
  <p>My question is more related to technique since I cannot replicate the behavior in any way, though it happens periodically in the production environment. </p>
  
  <p>I need reputation of 10 to post the screenshot ...</p>