Добавить класс проблемы в JQuery Mobile

Question

Я пытаюсь получить нажатой кнопку нажатием кнопки в JqueryMobile. Я могу добавить класс с помощью css, чтобы получить этот эффект onclick на кнопке, но не возвращать предыдущее состояние (при выпуске).

Ниже мой index.html код:

<div class="loginbutton" id="sgninBtn"> </div> 

Ниже мой код сценария, чтобы получить кнопку эффект:

$(document).on("click", "#sgninBtn", function() {  
$("#sgninBtn").addClass('loginbuttonclick'); 
});  

$(document).on("taphold", "#sgninBtn", function() { 
$("#sgninBtn").addClass('loginbuttonpressed'); 
}); 

Ниже моя CSS код, чтобы получить кнопку эффект:

.loginbutton {width:300px; height:48px; background:url(../images/samplespriteimage-login.png) 0 0px;} 
.loginbuttonpressed {width:300px; height:48px; background:url(../images/samplespriteimage-login.png) 0 -48px;} 
.loginbuttonclick {width:300px; height:48px; background:url(../images/samplespriteimage-login.png) 0 -96px;} 

Все эти классы применяются по мере необходимости, но после его щелчка и получения определенного стиля его не вернуть вернуться к предыдущему стилю при отпускании кнопки. Есть ли какие-либо события релиза в JqueryMobile, чтобы заставить его работать. Или есть способ решить эту проблему.

Я удаляю добавленные классы на странице перед событием. Но я в идеале хочу, чтобы это произошло при отпускании кнопки. Пожалуйста, помогите мне в этом. Спасибо

Answer 1

Все, что вам нужно, это .removeClass() после того, как мероприятие будет завершено.

Demo

click событие можно разделить на два события:

1. Начало мероприятия mousedown, vmousedown или touchstart. Здесь вы добавляете классы или делаете другие вещи.

   $('#sgninBtn').on('vmousedown touchstart', function (e) { 
       if (e.type == 'touchstart') { 
       $(this).addClass('loginbuttonpressed'); 
       } else { 
       $(this).addClass('loginbuttonclick'); 
       } 
       return false; 
   }); 
   

2. Конец события, mouseup, vmouseup или touchend. Здесь вы удаляете классы или делаете другие вещи.

   $('#sgninBtn').on('vmouseup touchend', function (e) { 
       if (e.type == 'touchend') { 
       $(this).removeClass('loginbuttonpressed'); 
       } else { 
       $(this).removeClass('loginbuttonclick'); 
       } 
       return false; 
   }); 
   

.