Question

在我的Rails應用程序中，我有提交信息到服務器的按鈕。有些按鈕是表單的一部分，有些則不是。我正在尋找一種方法來應用我的jquery，它可以在點擊後禁用按鈕。

這是我目前的jQuery：

$('.btn-disabler').on('click', function() { 
    $(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true); 
    $(this).find('.btn-label').addClass('invisible'); 
    }); 

該代碼添加一個圖標禁用按鈕，使文本可見。我已經擴展禁用功能對錨標籤工作如下https://stackoverflow.com/a/16788240/4584963

解釋一個例子鏈接：

<a class="btn btn-success btn-disabler" rel="nofollow" data-method="post" href="/approve?id=10"> 
    <span class="btn-label">Approve</span> 
</a> 

一個例子形式：

<form class="simple_form well" novalidate="novalidate" id="new_user" action="/" accept-charset="UTF-8" method="post"> 
     <div class="form-group"> 
     <input class="string optional form-control" placeholder="First name" type="text" name="user[first_name]" id="user_first_name"> 
     </div> 
     <div class="form-group"> 
     <input class="string optional form-control" placeholder="Last name" type="text" name="user[last_name]" id="user_last_name"> 
     </div> 
     <div class="form-group"> 
     <input class="string email optional form-control" placeholder="Email" type="email" name="user[email]" id="user_email"> 
     </div> 
     <div class="form-group"> 
     <input class="password optional form-control" placeholder="Password" type="password" name="user[password]" id="user_password"> 
     </div>     
     <div class="form-groups"> 
     <input class="password optional form-control" placeholder="Retype password" type="password" name="user[password_confirmation]" id="user_password_confirmation"> 
     </div> 
     <button name="button" type="submit" class="btn btn btn-primary btn-disabler"> 
     <span class="btn-label">Submit</span> 
     </button> 
</form> 

我上面jQuery的不適合工作形式爲。點擊表單上的按鈕會改變，但沒有提交。爲了讓jQuery來了，我需要將其更改爲這種形式的工作：

$('.signup-form').on('submit', function() { 
    $(this).find('.btn-disabler').append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true); 
    $(this).find('.btn-label').addClass('invisible'); 
    }); 

我怎樣才能鞏固這適用於這兩個環節，形成提交按鈕？看起來像我的問題源於鏈接需要點擊事件和表單需要提交事件。

Answer 1

您可以使用jQuery is()以查詢按鈕對象的父母是形式還是不以提交表單：

$('.btn-disabler').on('click', function() { 
    $(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true); 
    $(this).find('.btn-label').addClass('invisible'); 
    if ($(this).parent().is("form")) $(this).parent().submit(); 
}); 

Answer 2

你嘗試使用這種形式的ID喜歡

$('#new_user').on('submit' ... 

或表單元素的提交按鈕的

$('form').on('submit' ... 

Answer 3

覺得作爲一個擴展形式的提交事件。如果您禁用表單提交按鈕，表單提交事件將被禁用。你可以做的是將類添加到表單中，然後在你的jQuery代碼中你可以分配特定的規則。這樣的事情..

因此，使用此HTML：

<form class="disabler"> 
    <button type="submit"><span>Label</span></button> 
    </form> 

<a href="#" class="disabler"><span>Label</span></a> 

<button class="disabler"><span>Label</span></button> 

使用此javascript：

$('.disabler').each(function(e){ 
if(this.nodeName == "A"){ 
    // this is a hyperlink... 
    // apply css class 
    $(this).on('click', function(){   
     //some action 
     }); 

} else if (this.nodeName == "BUTTON") { 
    //this is a button outside of a form 
    // disable and add css class 
    $(this).on('click', function(){   
     //some action 
     }); 

} else if (this.nodeName == "FORM") { 
    $(this).on('submit', function(){ 
    $(this).find('button[type="submit"]') 
     .append("<i>Loading</i>") 
     .disable(); 
     }); 
    } 

}); 

你或許可以重構這個下跌更多，但我想你應該注意的nodeName當你試圖對這些組件應用不同的規則時。

我希望這能回答你的問題。