Ich habe Probleme mit der Anzeige meines Ajax-Spinners. Im Moment teste ich dies auf meinemlocalhost:3000/test mit folgendem Code:

Ich klicke auf einen Link, um den Loader anzuzeigen (Ruby on Rails-Code):

<li><%= link_to "New Test", new_test_path, :remote => true %></li>

ich habediv Der Loader sollte im Inneren erscheinen:

<div id="generate-add-form">
  <div class="ajax-loader"></div>
</div>

Dann meine Funktionen, um es erscheinen zu lassen:

jQuery( function($) {

$('#generate-add-form').ajaxStart( function() {
    $(this).children('.ajax-loader').show();
});

$('#generate-add-form').ajaxStop( function() {
    $(this).children('.ajax-loader').hide();
});

});

Das letzte ist mein CSS (einige Dinge wurden auskommentiert, um zu sehen, ob sie gebraucht werden oder nicht):

.ajax-loader {
 display:    none;
 /*position:   fixed;*/
 z-index:    1000;
 /*top:        -13em;
 left:       6em;*/
 background:url('ajax-loader.gif') 50% 50% no-repeat;
}
body.loading {
 overflow: hidden;
}
body.loading .ajax-loader {
 display: block;
}

Wie kommt es, dass ich auf den nicht angezeigten Link klicke?

BEARBEITEN:

<li><%= link_to "Test", new_test_path, :class => "add-link", :remote => true %></li>
<li><%= link_to "Study Guide", new_study_guide_path, :class => "add-link", :remote => true %></li>

$('#generate-add-form').children('.ajax-loader').hide();
  $('.add-link').click( function() {
    $('#generate-add-form').children('.ajax-loader').show();
});

Ich verstecke den Spinner zuerst und zeige ihn dann beim Klicken wieder an. Was ist dazwischen, wenn Sie zu einem anderen Link wechseln?