using ajaxComplete with drupal quicktabs I am trying to use .ajaxComplete() on my quicktabs but i cant seem to get it to hit. Would anyone have any ideas?

jQuery('#quicktabs-tab-find_a_doctor-1').click(function(){
  console.log('CLICKED');
  jQuery('#quicktabs-tab-find_a_doctor-1').css({
      "float":"left",
      "padding-right":"5px"
    });
  jQuery('#quicktabs-tab-find_a_doctor-1').parent().append('&lt;div id="loading-icon"&gt;&lt;img src="sites/all/themes/contributed/holyspirit/images/4.gif" /&gt;&lt;/div&gt;');

  //jQuery('#loading-icon').ajaxComplete(function(){
     // jQuery(this).hide();
    //});

  Drupal.behaviors.LoadingIcon = {
    attach: function() {  
      jQuery('#loading-icon').ajaxComplete(function() {
        jQuery(this).hide();
      });
    }
  }
});


I have tried both ideas, but i still cant get it to hit. Any help would be much appreciated!
Of course after posting on here I was able to figure out my mistake.

jQuery('#quicktabs-tab-find_a_doctor-1').click(function(){

  // Making room for loading icon
  jQuery('#quicktabs-tab-find_a_doctor-1').css({
      "float":"left",
      "padding-right":"5px"
    });

  // Adding the loading icon to tab
  jQuery('#quicktabs-tab-find_a_doctor-1').parent().append('&lt;div id="loading-icon"&gt;&lt;img src="sites/all/themes/contributed/holyspirit/images/4.gif" /&gt;&lt;/div&gt;');

  // Once ajax is complete remove loading icon from page
  (function($) {
    Drupal.behaviors.LoadingIcon = {
      attach: function() {  
        $(document).ajaxComplete(function() {
          $('#loading-icon').remove();
          $('#quicktabs-tab-find_a_doctor-1').css({
            "padding-right":"0px"
          });
        });
      }
    }
  }(jQuery));
});


According to http://api.jquery.com/ajaxcomplete/
You need to attach the .autoComplete() onto the document as stated right here:


  As of jQuery 1.8, the .ajaxComplete() method should only be attached to document.