As usually seemingly simple things take days to resolve, maybe someone could point me to a solution but after 2 days I give up on the following problem;

In html, in a form I have a button that is supposed to trigger loading of data through ajax call:

<button type="" class="btn" onclick="getData(); return false;">Show Data</button>

in javascript:

$(document).ajaxStart(function() {
    $("#qloader").show();
}).ajaxStop(function() {
    $("#qloader").hide('slow');
});?

and in html div with id qloader is defined with 100% width and height and spinner centered as the background, z-index above other:

<div id="qloader" class="myLoader" >&nbsp;</div>

Now, when page loads, ajax call is executed to get initial data, qloader div is brought up and it shows the spinner - animated, after ajax call finishes, qloader is hidden by ajaxStop.

Next, when I click on a button (show data) to initiate another ajax call, ajaxStart is triggered, but it does not show qloader, it waits until ajaxStop is triggered and then in a blink of eye it shows qloader and hides it.

I suspected that ajaxStart is not executed, so I put alert before $("#qloader").show(), then alert would be displayed and after that qloader WOULD be displayed BUT spinner animation would be suspended - no spinning, and after ajaxStop it would get hidden.

Without alert in ajaxStart trigger, in subsequent ajax calls div is not shown until just before ajaxStop is triggered.

It works fine for the first ajax call, but for subsequent ajax call triggered by click on form button it does not work.

Any idea what is wrong with this setup?