jquery spin不替换表单的提交按钮

Question

我使用spin.js和jquery.spin插件在web应用程序中显示ajax提交项的旋转图标。

它对于常规的链接按钮非常有效。然而，对于提交按钮，它不会显示，我也不知道为什么。

代码如下：

表格：

=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');
    });

当我点击submit按钮时，应该会显示一个旋转的图标。我可以在页面上看到以下内容被插入到html中：

<input class="btn btn-small authorize spin" name="commit" type="submit" value="Add Comment">
    <div class="spinner" style="position: relative; z-index: 2000000000; left: 537px; top: 950px; " aria-role="progressbar"></input>

微调器图标似乎嵌套在输入中，这就是它不显示的原因。那我怎么才能让它显示出来呢？

Answer 1

有一个拼写错误，请更改以下内容：

$('.spin').live('click',function(){

至：

$('.spinner').on('click',function(e){ // you can use `on()` instead of `live()` which is deprecated
   e.preventDefault()