title: jquery ajax post canceled
body: <p>I want to track the mouse click events on a set of UI components on a set of pages. To do this, I am using the following jquery/ajax call(trimmed out u):</p>
  
  <p>1.Ajax call which will add the click logging.</p>
  
  <pre><code>myClickLogger = { 
    endpoint: '/path/to/my/logging/endpoint.html',
    logClickEvent: function(clickCode) {
       $.ajax({
           'type':    'POST',
           'url':     this.endpoint,
           'async':   true,
           'cache':   false,
           'global':  false,
           'data':    {
              'clickCode':clickCode
           },
           'error': function(xhr,status,err){
               alert("DEBUG: status"+status+" \nError:"+err);
           },  
           'success': function(data){
               if(data.status!=200){
                   alert("Error occured!");
               }   
           }   
       }); 
    }   
  };
  </code></pre>
  
  <p>2.JQuery click event which will call the ajax logger(the clickCode is an identifier for which button/image was clicked):</p>
  
  <pre><code>$(document).ready(function() {
    $(".myClickEvent[clickName]").click(function() {
        var clickCode = $(this).attr("clickName");
        myClickLogger.logClickEvent(clickCode);
    });
  }); 
  </code></pre>
  
  <p>The above ajax call(1.) is "canceled" by browser whenever the button click being tracked takes to a new page.</p>
  
  <p>If I change 'aysnc' to 'false', then the ajax call succeeds.</p>
  
  <p>Also, click events which do not take to a new page succeed. Only the click events taking to new page are being canceled.</p>
  
  <p>I do not want to make the call synchronous.</p>
  
  <p>Any ideas, what could be the issue? How can I guarantee that the asynchronous call before is finished when the click event takes to a new page? </p>