Jquery ajax spinner relative to multiple form fields

I am trying to load two spinners on two fields, in the same (rails) form, that both have a keyup remote call.

Using Jquery, I have the following code:

<div class="form_element">
  <%= f.label :email, :class=>"field_hint", :title=>"Email" %>
  <%= f.text_field :email %>
  <div class="myloader" style="display:none;">
    <p>
    validating...
    </p>
  </div>
</div>

<div class="form_element">
  <%= f.label :username, :class=>"field_hint", :title=>"Username" %>
  <%= f.text_field :username %>
    <div class="myloader" style="display:none;">
      <p>
      validating...
      </p>
    </div>
</div>

Both of these fields have a keyup that does a remote call:

$('.form_element').ajaxStart(function() {
  $(this).children('.myloader').show();
});

$('.form_element').ajaxStop(function() {
  $(this).children('.myloader').d开发者_如何转开发elay(1000).fadeOut('fast');
});

At the moment when an the ajax happens both spinners appear when I only want the spinner who is a sibling of the field, I am trying to work out how to make each spinner div relevant to its field.

I am new to Ajax so any advice on maybe doing the ajaxStart/Stop differently are more than welcome, maybe a way to only have one spinner which moves next to the field instead of having two would be helpful.

I encourage you to use this jQuery plugin for your task: http://plugins.jquery.com/project/nimbleLoader

It will allow you to create loading bar for any element in your web page. Here you can see example: http://www.salesclic.com/jquery.nimble.loader/demo/