移動設備上的提交按鈕不點播後點擊

Question

我有一個關注，但在我的網站上點擊時通過ajax更新數據庫。

成功返回後，我更改按鈕的類以顯示不同的背景顏色。

這適用於臺式機，但在移動設備上，提交按鈕保持活動狀態/具有懸停操作。

當懸停提交我有懸停事件，只改變背景顏色與CSS：懸停。

div的顏色與將鼠標懸停時的顏色相同，但在ajax響應更改了該類之後。

希望到目前爲止有意義。

所以我有一個形式提交：

<form> 
    <input type="submit" id="followsubmit" class="followbuttonNO"> 
</form> 

而且在正確的響應：

if (response.followSuccess) { 
    $('#followsubmit').attr('class', 'followbuttonYES'); 
} 

在桌面，該代碼更改類和按鈕的背景顏色變化（因爲類有不同的背景顏色...），但在移動設備上，按鈕轉到懸停效果CSS的顏色。

如果我點擊提交按鈕，然後在響應之前推送頁面上的任何其他地方，那麼它工作正常。

TLDR;如何在ajax調用後使表單提交按鈕取消焦點？我試過.blur（）但沒有奏效。

謝謝！

Answer 1

你必須記住，使用懸停觸摸屏是棘手的，因爲:hover僞類查找動作指向和選擇/激活。因此，在觸摸屏上，點擊的動作基本上與懸停相同。所以當你點擊提交按鈕時，它會一直保持，直到你取消選擇它。

解決這個問題的一種方法是讓手機/觸摸屏設備進行點擊操作，並使用setTimeout()配合短計時器並更改類。

我知道你說過你試過.blur()但我不確定你是如何嘗試的。您需要設置模糊功能，然後激活觸發器。看看下面...

$('#followsubmit').blur(function(){ 
    //blur action 
}); 

elsewhere... 

$('#followsubmit').trigger('blur'); //execute blur action 

Answer 2

即使你說blur不起作用，它必須工作。之前有約束力的任何其他功能錨或輸入字段，只需添加：

$('a, input').on('click', function(
    $(this).blur(); 
});