Changing button colors with JQM and addClass only works once per page

Question

I'm trying to change the background of a button for a mobile app. The Click event seems too slow, so I used vmousedown. This works but only once per page. I'm doing this.

Mousedown
$(.headerNavBar).on('vmousedown','.logout',function() {
$(this).removeClass('ui-bar-c').addClass('ui-bar-c');
});
Mouse UP
$(.headerNavBar).on('vmouseup','.logout',function() {
$(this).removeClass('ui-bar-c');
});
$(.headerNavBar).on('tap','.logout',function() {
$(this).removeClass('ui-bar-c');
});

HTML is

<li><a href="#" class="logout" data-icon="back" data-theme="b">Log out</a></li>

The button is in a JQueryMobile page content block.

If there is a better way to just change the background gradient that would be fine too.

Update: I just noticed in the inspector that the class is being added and removed, it's just not updating on the page.

Answer 1

Use parent element or document to bind the event and give the selector. Second thing you may check you have vmousedown it would be mousedown and same for vmouseup.

Mousedown

$(document).on('vmousedown','.logout', function() {
   $(this).removeClass('ui-bar-c').addClass('ui-bar-c');
});

Mouse UP

$(document).on('vmouseup','.logout', function() {
      $(this).removeClass('ui-bar-c');
});

Answer 2

$('body').delegate('.logout','vmousedown', function() {
   $(this).removeClass('ui-bar-c').addClass('ui-bar-c');
});