jquery spin not replacing submit button for form
===

I user the spin.js and jquery.spin plugins to show a spinning icon for ajax submitted items in my web application.

It works great for regular link buttons. However for a submit button it does not show and I can't figure out why.

Here is the code:

Form:

    =form_for(@resource, :url => add_comment_resource_path, :remote => true) do |f|
                    =text_area_tag :comment,nil, :class => "span7", :rows => 3
                    =f.submit "Add Comment", :class => "btn authorize spin"   
JS:

    //= require spin.min
    //= require jquery.spin
    
    
    
    
    	$('.spin').live('click',function(){
    		$(this).spin('small');
    	});
    	

 
When I click on the submit button a spinning icon should show. I can see on the page the following gets inserted in the html:

    <div class="spinner" style="position: relative; z-index: 2000000000; left: 537px; top: 950px; " aria-role="progressbar"><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-100-25-0-8 1s linear infinite; "><div style="position: absolute; width: 7px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0976563) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(0deg) translate(5px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial; "></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-100-25-1-8 1s linear infinite; "><div style="position: absolute; width: 7px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0976563) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(45deg) translate(5px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial; "></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-100-25-2-8 1s linear infinite; "><div style="position: absolute; width: 7px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0976563) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(90deg) translate(5px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial; "></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-100-25-3-8 1s linear infinite; "><div style="position: absolute; width: 7px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0976563) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(135deg) translate(5px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial; "></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-100-25-4-8 1s linear infinite; "><div style="position: absolute; width: 7px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0976563) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(180deg) translate(5px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial; "></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-100-25-5-8 1s linear infinite; "><div style="position: absolute; width: 7px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0976563) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(225deg) translate(5px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial; "></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-100-25-6-8 1s linear infinite; "><div style="position: absolute; width: 7px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0976563) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(270deg) translate(5px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial; "></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-100-25-7-8 1s linear infinite; "><div style="position: absolute; width: 7px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0976563) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(315deg) translate(5px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial; "></div></div></div>