Adding event listener on an AJAX button I've tried to add a loading animation to the website in case if the user clicks on buttons or input submit buttons. It work, except on those buttons which using AJAX. For some reason those buttons are processed, but my event listener looks like it was detached... Anybody know the reason or how can I fix it?

Code for the loading (it will create an overlay with a spinner and text):

(function ($, Drupal) {
  Drupal.behaviors.myModuleLoading = {
    attach: function attach(context) {
      $('button, .btn, input[type=submit]').not('.close').once('loading').on('click', function (event) {
        // Create the loading DOM.
        var background = $('&lt;div&gt;', document);
        background.addClass('loading-background');
        var logo = $('&lt;div&gt;', document);
        logo.addClass('loading-container').append(
          $('&lt;div&gt;', document).addClass('loading-container-inner').append(
            $('&lt;div&gt;', document).addClass('loading-icon')
              .append($('&lt;div&gt;', document)).append($('&lt;div&gt;', document))
              .append($('&lt;div&gt;', document)).append($('&lt;div&gt;', document))
              .append($('&lt;div&gt;', document)).append($('&lt;div&gt;', document))
              .append($('&lt;div&gt;', document)).append($('&lt;div&gt;', document))
          ).append(
            $('&lt;div&gt;', document).addClass('loading-text').text('Processing...')
          )
        );

        // Add to the body the created DOM.
        $('body').append(background).append(logo);
      });

      // Remove any remaining loading if user close a modal.
      $('.close').on('click', function () {
        $('.loading-background, .loading-container').remove();
      });

      // If it was an AJAX call this will be called.
      $('.loading-background, .loading-container').remove();
    }
  };
}(jQuery, Drupal));


Keep in mind, it works on those buttons, which doesn't use AJAX at all. With those buttons which using AJAX, it doesn't work from the beginning, but the loading-processed class is visible, which is added by the once('loading') code. I guessing there's a magic somewhere in Drupal which prevents to call other event listeners? (In chrome there's a way to stop the script and debugging if a click event happened, in AJAX buttons it doesn't stop, in normal buttons it stops, both are input[type=submit] type buttons.)
I'm not sure, based on your code, how you are adding buttons to your form(s)/pages, however, I would venture to guess the AJAX controlled buttons are not working because they are calling the built-in loading/submit callbacks within the Drupal 7 AJAX API (example.)

You may find the following example useful:

/**
* Implementation of hook_menu().
*/
function myModule_ajax_menu() {
  $items['get/ajax/Simple Drupal AJAX load with jQuery and delivery callback'] = array(
  'page callback' =&gt; 'myModule_ajax_get_ajax', // Render HTML
  'type' =&gt; MENU_CALLBACK,
  'page arguments' =&gt; array(2),
  'access arguments' =&gt; array('access content'),
  'delivery callback' =&gt; 'myModule_ajax_callback',  // Magic goes here
 );
 return $items;
}