I am trying to implement an ajax loading image in my rails app.

Right now what I have is a loading gif that is there on page load, during the ajax process, and then disappears once the ajax is complete. The middle and last part is what I want, but I want this image to be hidden until I click the ajax trigger link.

I have looked up many ways to do this. Some I tried are to create a new partial, using ajax code in js with url tag, data tag, hiding the image in css then showing it on ajax start, but nothing seems to work. 

This is what I have: 

js:

```
$(function() {
    $('.load-ajax').hide()  // hide it initially.
        .ajaxStart(function() {
            $(this).show(); // show on any Ajax event.
        })
        .ajaxStop(function() {
            $(this).hide(); // hide it when it is done.
        });
}); 

```

view:

```
 <div class='load-ajax'></div> ///loading image div///

  <div class="button"> ///ajax trigger link///
        <%= link_to "Generate Mockups",  { :controller => :ideas, :action => 
      :generate_mockups, remote: true, :id => idea.permalink, :class => 'button'} %>
  </div>

```

css:

```
.load-ajax {
    float:right;
    background-image: image-url("ajax-loader.gif");
    width:150px;
    height:20px;
    background-position: center;
    background-repeat: no-repeat;
}

```

controller:

```
   def generate_mockups
    @idea = Idea.find_by_permalink(params[:id])
    begin
      @idea.generate_mockups
      rescue Exception => e
      flash[:error] = "There was an error generating the mockups for #
 {@idea.working_name}! # {e.message}"
    end
    respond_to do |format|
      flash.now[:notice] = "Successfully generated mockups for #{@idea.working_name}"
      format.html {redirect_to idea_url(params[:id])}
      format.js
    end
  end

```

when I watch this expression in chrome, I get this:

```
$('.load-ajax').ajaxStart: function ( fn ){
arguments: null
caller: null

```

any idea why?