how to change clickable item when i click them in JqueryMobile? - css

Question

I am developing a task in using phonegap and jquerymobile.
How should i do to change the color of a clickable item when i click on them?
I have written the code below:
$(".testbutton").click(function(){
$(".testbutton").css("background-color","yellow");
});
But the background color will only change yellow after i release my mouse on it. I wan it to change to yellow whenever my mouse is clicked on tat item, and recover to its original background color when i release the mouse.
Can anyone please help?

Answer 1

Is this what you're trying to accomplish?
Live Example:
http://jsfiddle.net/A2bd3/16/
CSS:
.task-bg-color {
background-color: yellow;
}
JS:
$('#clickAndHold').mousedown(function() {
$(this).children().addClass('task-bg-color');
$('ul#tasks').listview('refresh');
});
$('#clickAndHold').mouseup(function() {
$(this).children().removeClass('task-bg-color');
$('ul#tasks').listview('refresh');
});
$('#clickAndStick').click(function() {
$(this).children().addClass('task-bg-color');
$('ul#tasks').listview('refresh');
});
$('#clickAndToggle').click(function() {
if ($(this).children().hasClass('task-bg-color')) {
$(this).children().removeClass('task-bg-color');
} else {
$(this).children().addClass('task-bg-color');
}
$('ul#tasks').listview('refresh');
});
HTML:
<div data-role="page" class="type-home">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f" id="tasks">
<li data-role="list-divider">Tasks (Background actions)</li>
<li id="clickAndHold">Click & Hold</li>
<li id="clickAndStick">Click & Stick</li>
<li id="clickAndToggle">Click & Toggle</li>
</ul>
</div>
</div>