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

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开发者_如何学C on tat item, and recover to its original background color when i release the mouse.

Can anyone please help?

---

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"><a href="#">Click &amp; Hold</a></li>
            <li id="clickAndStick"><a href="#">Click &amp; Stick</a></li>
            <li id="clickAndToggle"><a href="#">Click &amp; Toggle</a></li>
        </ul>
    </div>
</div>