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):

1.Ajax call which will add the click logging.

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!");
             }   
         }   
     }); 
  }   
};

2.JQuery click event which will call the ajax logger(the clickCode is an identifier for which button/image was clicked):

$(document).ready(function() {
  $(".myClickEvent[clickName]").click(function() {
      var clickCode = $(this).attr("clickName");
      myClickLogger.logClickEvent(clickCode);
  });
}); 

The above ajax call(1.) is "canceled" by browser whenever the button click being tracked takes to a new page.

If I change 'aysnc' to 'false', then the ajax call succeeds.

Also, click events which do not take to a new page succeed. Only the click events taking to new page are being canceled.

I do not want to make the call synchronous.

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?